我试图使用CSS设置背景图像，但它覆盖了标题栏上的内容。我已经固定了收割台的位置。但是当我滚动图像时，它覆盖了标题。有人能告诉我如何修复它吗？我附上了一张屏幕截图，滚动标题时没有修复。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/styles.css">
<title></title>
</head>
<body>
<section id="title-bar">
<h1> Visualizer </h1>
<a href="url">Login</a>
<a href="url">Registration</a>
<a href="url">Home</a>
</section>
<section id="intro">
<div class="bg-image"></div>
<div class="bg-image"></div>
</section>
</body>
</html>
滚动后，图像出现在标题栏上方，但我正试图将图像放在标题栏内。CSS代码
''
#title-bar{
background-color: #9E9D89;
padding-top: 25px;
padding-bottom: 15px;
overflow: visible;
position: fixed;
width: 100%;
}
#title-bar h1{
margin-left: 50px;
margin-top: 0;
padding-top: 0;
float: left;
color: white;
}
#title-bar a{
margin-right: 50px;
padding: 10px 0px 10px 0px;
float: right;
color: white;
text-decoration: none;
}
body{
padding: 0;
margin: 0;
}
#title-bar a:hover {
color: white;
background-color: #185ADB;
border-radius: 25px;
padding-left: 10px;
padding-right: 10px;
}
#intro {
margin: 0px;
padding-top: 100px;
}
.bg-image {
/* The image used */
background-image: url("../images/image1.jpg");
/* Add the blur effect */
filter: blur(0px);
-webkit-filter: blur(0px);
/* Full height */
height: 400px;
/* Center and scale the image nicely */
/* background-position: center; */
background-repeat: no-repeat;
background-size: cover;
}
[enter image description here][1]
[1]: https://i.stack.imgur.com/k1tFP.jpg
您必须应用高于该节的z-index。
根据MDN:
z-indexCSS属性设置已定位元素及其子项或flex项的z顺序z索引较大的重叠元素覆盖z索引较小的元素
在我们的例子中，简单地将z-index: 1应用于#title-bar将使其与部分重叠，因为其z-index默认为0。
#title-bar {
background-color: #9E9D89;
padding-top: 25px;
padding-bottom: 15px;
overflow: visible;
position: fixed;
width: 100%;
z-index: 1;
}
#title-bar h1 {
margin-left: 50px;
margin-top: 0;
padding-top: 0;
float: left;
color: white;
}
#title-bar a {
margin-right: 50px;
padding: 10px 0px 10px 0px;
float: right;
color: white;
text-decoration: none;
}
body {
padding: 0;
margin: 0;
}
#title-bar a:hover {
color: white;
background-color: #185ADB;
border-radius: 25px;
padding-left: 10px;
padding-right: 10px;
}
#intro {
margin: 0px;
padding-top: 100px;
}
.bg-image {
/* The image used */
background-image: url("https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1");
/* Add the blur effect */
filter: blur(0px);
-webkit-filter: blur(0px);
/* Full height */
height: 400px;
/* Center and scale the image nicely */
/* background-position: center; */
background-repeat: no-repeat;
background-size: cover;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/css/styles.css">
<title></title>
</head>
<body>
<section id="title-bar">
<h1> Visualizer </h1>
<a href="url">Login</a>
<a href="url">Registration</a>
<a href="url">Home</a>
</section>
<section id="intro">
<div class="bg-image"></div>
<div class="bg-image"></div>
</section>
</body>
</html>