CSS过滤器属性禁用导航栏上的固定位置[重复]

Question

我制作了导航栏并将其定位（固定），它工作正常。我能够向下滚动和所有。一旦我在页面上的图像中添加了过滤器（亮度），导航栏就消失了。我尝试使用伪元素并设置位置（绝对/相对），我将过滤器属性设置为图像子元素的容器，它仍然不起作用。有人可以帮助我如何让我的导航栏显示在固定位置并且仍然过滤图像。提前致谢。

nav {
  position: fixed;
  background-color: #fff;
}

nav ul {
  margin: 0;
  padding: 0;
}

.navbar-brand {
  padding-right: 20px;
}

nav li {
  display: inline-block;
  padding: 10px;
}

nav a {
  color: #000;
  text-decoration: none;
}

nav a:hover {
  color: #ff6600;
  text-decoration: none;
}

.title-image img {
  width: 100%;
  height: 300px;
  filter: brightness(60%);
}

<nav>
  <ul>
    <li>
      <a class="navbar-brand" href="#">Navbar Brand</a>
    </li>
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li>
      <a href="#">services</a>
    </li>
  </ul>
</nav>


<div class="title-image">
  <img src="https://images.unsplash.com/photo-1599546824091-f49550ce8cbc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>

JSfiddle Demo

Answer 1

只需将 z-index 添加到您的导航元素，如下所示

nav{
  position: fixed;
  background-color: #fff;
  z-index:999;
}
nav ul{
  margin: 0;
  padding: 0;
  }
.navbar-brand{
  padding-right: 20px;
}

nav li{
  display: inline-block;
  padding: 10px;
}
nav a{
  color: #000;
  text-decoration: none;
}
nav a:hover{
  color: #ff6600;
  text-decoration: none;
}

.title-image img{
  width: 100%;
  height: 300px;
  filter: brightness(60%);
}

<nav>
  <ul>
     <li>
       <a class="navbar-brand" href="#">Navbar Brand</a>
     </li>
     <li>
       <a href="#">Home</a>
     </li>   
     <li>
       <a href="#">About</a>
     </li>
     <li>
       <a href="#">services</a>
     </li>
  </ul>
</nav>


<div class="title-image">
  <img src="https://images.unsplash.com/photo-1599546824091-f49550ce8cbc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>

Answer 2

导航栏没有消失，它就在图像下方。要把它放在前面，你应该使用z-index: 10;（或任何大于0的值）。

查看更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

此外，请记住，您的图片（或导航栏之后的任何元素）将位于页面顶部。可能你想让导航栏高度的等价物作为任何内容之前的空间。