将 CSS 效果应用于父级而不是子级答案

【问题标题】：Apply CSS effect to parent but not children将 CSS 效果应用于父级而不是子级
【发布时间】：2017-10-24 21:26:32
【问题描述】：

我已经应用了我想要的效果，该效果只适用于 div 父级，但它也适用于子级。

这是我的 HTML 代码：

#wrapper {
  height: 100%;
  background-image: url("../asset/banner.jpg");
  background-attachment: fixed;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  filter: grayscale(100%);
}

#top-wrapper {
  width: 100%;
  height: 10%;
  background-color: rgba(39, 35, 30, 0.5);
}

<div id="wrapper">
  <header id="top-wrapper" class="inline-content">
    <div id="logo" class="inline-content">
      <img src="asset/logo.svg" alt="Logo">
      <h1>portfolio</h1>
    </div>
    <nav>
      <ul id="menu" class="inline-content">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Project</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>

  <section id="banner" class="inline-content">
    <h2>Hello World!</h2>
    <h2>and I am a Web Developer</h2>
    <h3>based in London</h3>
  </section>
</div>

徽标是多色徽标，但以灰度显示。

【问题讨论】：

它的行为符合预期。为什么不将图像保存为灰度？
我可以将页面保存为灰度，但我想学习如何在图像上添加 css 效果
CSS filter 适用于整个元素（包括子元素，因此在您的情况下是整个页面）。您可能想尝试background-blend-mode，它似乎更适合您的用例。但如果关键是要使图像灰度化，就这样保存它——它可能会节省相当大一部分的数据大小作为奖励。
我明白了。如果我想应用不同的效果，是否有类似的东西，比如：模糊或不透明度？
不，但是您可以将图像移动到单独的元素并将其放置在其他元素的后面，如下所示：stackoverflow.com/questions/20411257/…（编辑：或在@stevelacerda7 的答案中类似，这几乎是一回事)

标签： html css effects

【解决方案1】：

插入一个额外的 div 并将其定位为绝对：

<div id="wrapper">
    <div id="test" style="
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url(banner.jpg);
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    filter: grayscale(100%);
    z-index: -2;
"></div>
      <header id="top-wrapper" class="inline-content">
        <div id="logo" class="inline-content">
          <img src="logo.svg" alt="Logo">
          <h1>Tuffi portfolio</h1>
        </div>
        <nav>
          <ul id="menu" class="inline-content">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Project</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
      </header>

      <section id="banner" class="inline-content">
        <h2>Hello World!</h2>
        <h1>I am Tuffi</h1>
        <h2>and I am a Web Developer</h2>
        <h3>based in London</h3>
      </section>
    </div>

显然，从#wrapper 中删除除 100% 高度之外的所有内容。

【讨论】：

这是一个好的做法还是坏的做法？我的意思是使用 css 应用效果
它确实有效，我刚刚在您现有的网站上尝试过。创建一个 jsfiddle，我会让它为你工作。至于不好的做法，不，这不是坏做法。如果它有某种效果，通常你会想要使用灰度。就像您将鼠标悬停在它上面，然后它会转换为彩色图像。您将使用灰度图像来节省尺寸。
哦，我明白了，谢谢您的支持。非常感谢！

【解决方案2】：

我同意所有 cmets：将背景保存为灰度。它将为您节省一些 KBytes，并且它也可以在 IE 中工作。比使用 IE 不关心的 CSS 规则更令人印象深刻 ;-)

【讨论】：