html - 带有过滤器和导航的背景图像 - CSS

Question

我有下一个问题: 我有一个带有背景 img 的 div，我添加了滤镜亮度，但这也影响了我在该图像旁边的内容: [![介绍水质图像描述][1]][1]

html:

<header>
   <div id="logo-page">
        <div id="top-bar">
            <nav>
                <a href="#" class="menu">home</a>
                <a href="#work" class="menu">work</a>
                <a href="#projects" class="menu">projects</a>
                <a href="#gallery" class="menu">gallery</a>
                <a href="#papers" class="menu">papers</a>
                <a href="#" class="menu">contact</a>
            </nav>
        </div>
    </div><!-- Logo -->
</header>

CSS:

#logo-page{
 background-color: rgba(0,0,0,1);
background-image: url("../img/logo.jpg");
width: auto;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
filter:brightness(0.5);  

想法是导航或您在其中添加的内容不受过滤器的影响。

Answer 1

问题是您将亮度过滤器应用于整个“ Logo 页面”容器，其中还包含导航栏。如果只想将滤镜应用于背景图像，则必须为图像创建另一个容器并在其中应用滤镜。

请注意，我们将新图像容器中的 z-index 值设置为 -1，因此它显示在导航栏后面，并且两个容器的 position: fixed。

HTML:

<header>
   <div id="logo-page">
        <div id="top-bar">
            <nav>
                <a href="#" class="menu">home</a>
                <a href="#work" class="menu">work</a>
                <a href="#projects" class="menu">projects</a>
                <a href="#gallery" class="menu">gallery</a>
                <a href="#papers" class="menu">papers</a>
                <a href="#" class="menu">contact</a>
            </nav>
        </div>
        <div id="background-image"></div>
    </div><!-- Logo -->
</header>

CSS:

#logo-page{
  width: auto;
  height: 100vh;
}

#top-bar {
  position: fixed;
}

#background-image {
  background-image: url("../img/logo.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  filter:brightness(0.5);

  width: 500px;
  height: 500px;

  z-index: -1;
  top: 5px;
  left: 5px;
  position: fixed;
}

工作 fiddle : https://jsfiddle.net/x53r8nmk/3/