html - 将 CSS 效果应用于父项而不是子项

Question

我已经应用了我想要的效果，它只适用于 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>

Logo 是多色 Logo ，但显示为灰度。

Answer 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>

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