将 CSS 效果应用于 parent 但不应用于 children

Question

我已经为 div parent 应用了我想要的效果，但它也适用于 children。

这是我的 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>

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

Answer 1

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

Answer 2

插入一个额外的 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 效果应用于 parent 但不应用于 children

Apply CSS effect to parent but not children

html

css

effects