我正试图在这张图片的顶部添加一个我制作的渐变标题，但它给了我一个奇怪的白色背景https://i.stack.imgur.com/ppuJq.png我希望图像顶部的文本有一个透明的背景。使导航条变黑，这样更容易看到，但无论如何，我该如何删除它？我知道js脚本是未完成的，如果这与它有关的话。
这是我的代码
/*
CSS for the page:
*/
* {
margin: 0;
}
.WelcomeMenu h1 {
font-size: 50px;
}
.WelcomeMenu img {
width: 100%;
height: 85vh;
}
.img-gradient {
position: absolute;
width: 100%;
height: 85vh;
}
.img-gradient::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 85vh;
background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85));
}
.MiddleMenu {
color: #FFFF;
height: 600vh;
}
/*
CSS for navbar:
*/
body {
font-family: 'Noto Sans', sans-serif;
}
img {
width: 600px;
margin-left: 0;
margin-top: 0;
margin-bottom: 50px;
}
nav {
align-items: center;
padding: 20px;
display: flex;
justify-content: space-between;
background-color: #000;
transition-duration: 0.3s;
transition-timing-function: linear;
transition-delay: 0.1s;
}
nav .fa {
display: none;
}
nav:hover {
opacity: 100;
}
.nav-list .active {
color: #F10000;
opacity: 1;
}
.nav-list img {
width: 110px;
margin-left: -40px;
margin-top: -30px;
margin-bottom: -35px;
}
.nav-list {
text-align: right;
}
.nav-list ul li {
list-style: none;
display: inline-block;
padding: 2px 20px;
position: relative;
}
.nav-list ul li a {
text-decoration: none;
color: #F10000;
font-size: 20px;
opacity: 1;
}
.nav-list ul li::after {
content: '';
width: 0%;
height: 4px;
background: #C5C6C7;
display: block;
margin: auto;
transition: 0.6s;
}
.nav-list ul li:hover::after {
width: 100%;
}
@media (max-width: 700px) {
.nav-list ul li {
display: block;
}
.nav-list {
position: absolute;
background: black;
height: 125vh;
width: 175px;
top: 0;
right: -300px;
text-align: left;
z-index: 2;
transition: 1s;
}
.nav-list ul li a {
font-size: 15px;
}
.nav-list ul li {
padding: 20px;
}
nav .fa {
display: block;
color: white;
margin: 10px;
font-size: 20px;
cursor: pointer;
padding-left: 10px;
padding-top: 5px;
}
}<!-- Bootstrap-4 -->
<title> Lookout </title>
<link rel="preconnect" href="https://fonts.googleapis.com/%22%3E">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Body -->
<section class="header">
<nav>
<div class="nav-list" id="navList">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li> <a href="/index.html" class="active"> AAAA </a> </li>
<li> <a href="/sub/check/check.html"> AAAA </a> </li>
<li> <a href="/"> AAAA </a> </li>
<li> <a href="/"> AAAA </a> </li>
<li> <a href="https://www.medietilsynet.no/"> AAAAAA </a> </li>
<a href="https://www.medietilsynet.no/"> <img src="Bilder/Medietilsynet.png"></a>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
</section>
<section>
<div class="WelcomeMenu">
<h1> STOP THINK & CHECK. </H1>
<div class="img-gradient">
<img src="https://sites.google.com/site/quackquackquest/_/rsrc/1469302829712/duck-duck-maps/duck%20banner%203.jpg">
</div>
</div>
</section>
<section>
<div class="MiddleMenu">
</div>
</section>这是因为body标签上的背景颜色和.WelcomeMenu上的透明背景。修复方法(只有其中一种(：
- 为
.WelcomeMenu添加背景色 - 有一个父元素并将背景色设置为黑色
- 使车身背景颜色为黑色
/*
CSS for the page:
*/
* {
margin: 0;
}
.WelcomeMenu {
background-color: red
}
.WelcomeMenu h1 {
font-size: 50px;
}
.WelcomeMenu img {
width: 100%;
height: 85vh;
}
.img-gradient {
position: absolute;
width: 100%;
height: 85vh;
}
.img-gradient::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 85vh;
background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85));
}
.MiddleMenu {
color: #FFFF;
height: 600vh;
}
/*
CSS for navbar:
*/
body {
font-family: 'Noto Sans', sans-serif;
}
img {
width: 600px;
margin-left: 0;
margin-top: 0;
margin-bottom: 50px;
}
nav {
align-items: center;
padding: 20px;
display: flex;
justify-content: space-between;
background-color: #000;
transition-duration: 0.3s;
transition-timing-function: linear;
transition-delay: 0.1s;
}
nav .fa {
display: none;
}
nav:hover {
opacity: 100;
}
.nav-list .active {
color: #F10000;
opacity: 1;
}
.nav-list img {
width: 110px;
margin-left: -40px;
margin-top: -30px;
margin-bottom: -35px;
}
.nav-list {
text-align: right;
}
.nav-list ul li {
list-style: none;
display: inline-block;
padding: 2px 20px;
position: relative;
}
.nav-list ul li a {
text-decoration: none;
color: #F10000;
font-size: 20px;
opacity: 1;
}
.nav-list ul li::after {
content: '';
width: 0%;
height: 4px;
background: #C5C6C7;
display: block;
margin: auto;
transition: 0.6s;
}
.nav-list ul li:hover::after {
width: 100%;
}
@media (max-width: 700px) {
.nav-list ul li {
display: block;
}
.nav-list {
position: absolute;
background: black;
height: 125vh;
width: 175px;
top: 0;
right: -300px;
text-align: left;
z-index: 2;
transition: 1s;
}
.nav-list ul li a {
font-size: 15px;
}
.nav-list ul li {
padding: 20px;
}
nav .fa {
display: block;
color: white;
margin: 10px;
font-size: 20px;
cursor: pointer;
padding-left: 10px;
padding-top: 5px;
}
}<!-- Bootstrap-4 -->
<title> Lookout </title>
<link rel="preconnect" href="https://fonts.googleapis.com/%22%3E">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Body -->
<section class="header">
<nav>
<div class="nav-list" id="navList">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li> <a href="/index.html" class="active"> AAAA </a> </li>
<li> <a href="/sub/check/check.html"> AAAA </a> </li>
<li> <a href="/"> AAAA </a> </li>
<li> <a href="/"> AAAA </a> </li>
<li> <a href="https://www.medietilsynet.no/"> AAAAAA </a> </li>
<a href="https://www.medietilsynet.no/"> <img src="Bilder/Medietilsynet.png"></a>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
</section>
<section>
<div class="WelcomeMenu">
<h1> STOP THINK & CHECK. </H1>
<div class="img-gradient">
<img src="https://sites.google.com/site/quackquackquest/_/rsrc/1469302829712/duck-duck-maps/duck%20banner%203.jpg">
</div>
</div>
</section>
<section>
<div class="MiddleMenu">
</div>
</section>您使用的图像是背景图像！因此，为了获得更好的解决方案，您可以将其作为div.WelcomeMenu的背景。
白色是页面的背景(默认情况下为空白白色页面(。元素的顺序是：
Navbar - black background
h1 - the background of the page
img - the image itself
也就是说h1在两个元素之间。
如果你仍然想要元素，你可以简单地添加：
.WelcomeMenu {
position: relative;
}
.WelcomeMenu h1 {
color: #ffffff;
font-size: 50px;
position: absolute;
top: 100px; (change it as you wish)
left: 100px; (change it as you wish)
}
代码：
/*
CSS for the page:
*/
* {
margin: 0;
}
.WelcomeMenu {
position: relative;
height: 85vh;
width: 100%;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
url("https://sites.google.com/site/quackquackquest/_/rsrc/1469302829712/duck-duck-maps/duck%20banner%203.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.WelcomeMenu h1 {
color: #ffffff;
font-size: 50px;
}
.MiddleMenu {
color: #FFFF;
height: 600vh;
}
/*
CSS for navbar:
*/
body {
font-family: 'Noto Sans', sans-serif;
}
img {
width: 600px;
margin-left: 0;
margin-top: 0;
margin-bottom: 50px;
}
nav {
align-items: center;
padding: 20px;
display: flex;
justify-content: space-between;
background-color: #000;
transition-duration: 0.3s;
transition-timing-function: linear;
transition-delay: 0.1s;
}
nav .fa {
display: none;
}
nav:hover {
opacity: 100;
}
.nav-list .active {
color: #F10000;
opacity: 1;
}
.nav-list img {
width: 110px;
margin-left: -40px;
margin-top: -30px;
margin-bottom: -35px;
}
.nav-list {
text-align: right;
}
.nav-list ul li {
list-style: none;
display: inline-block;
padding: 2px 20px;
position: relative;
}
.nav-list ul li a {
text-decoration: none;
color: #F10000;
font-size: 20px;
opacity: 1;
}
.nav-list ul li::after {
content: '';
width: 0%;
height: 4px;
background: #C5C6C7;
display: block;
margin: auto;
transition: 0.6s;
}
.nav-list ul li:hover::after {
width: 100%;
}
@media (max-width: 700px) {
.nav-list ul li {
display: block;
}
.nav-list {
position: absolute;
background: black;
height: 125vh;
width: 175px;
top: 0;
right: -300px;
text-align: left;
z-index: 2;
transition: 1s;
}
.nav-list ul li a {
font-size: 15px;
}
.nav-list ul li {
padding: 20px;
}
nav .fa {
display: block;
color: white;
margin: 10px;
font-size: 20px;
cursor: pointer;
padding-left: 10px;
padding-top: 5px;
}
}<!-- Bootstrap-4 -->
<title> Lookout </title>
<link rel="preconnect" href="https://fonts.googleapis.com/%22%3E">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Body -->
<section class="header">
<nav>
<div class="nav-list" id="navList">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li> <a href="/index.html" class="active"> AAAA </a> </li>
<li> <a href="/sub/check/check.html"> AAAA </a> </li>
<li> <a href="/"> AAAA </a> </li>
<li> <a href="/"> AAAA </a> </li>
<li> <a href="https://www.medietilsynet.no/"> AAAAAA </a> </li>
<a href="https://www.medietilsynet.no/"> <img src="Bilder/Medietilsynet.png"></a>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
</section>
<section>
<div class="WelcomeMenu">
<h1> STOP THINK & CHECK. </h1>
</div>
</section>