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

问题是您要将亮度滤镜应用于整个“徽标页”容器，该容器也包含导航栏。如果要将过滤器仅应用于背景图像，则必须为该图像创建另一个容器，然后在其中应用过滤器。

请注意，我们将新图像容器中的 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;
}

工作小提琴： https://jsfiddle.net/x53r8nmk/3/

使用filterand导航的背景img-CSS

1 个答案: