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>

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

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>

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

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

2 个答案: