重复使用带过滤器的背景图像

Question

我的项目使用两个 JPG 作为两个不同启动画面的背景纹理。图像是相同的，但颜色相反。我想知道是否有一种方法可以消除第二张图像（反转颜色）并使用 filter 来获得相同的结果。

问题是，我不确定如何应用 styles/structure 内容，以便将滤镜限制为仅背景图像。事实上，整个元素（文本、边框）都受到过滤器的影响，这与设计的其余部分冲突：

HTML

<header class="header">
    <div class="splash splash-one">Page Title</div>
    <div class="splash splash-two">
        <div>thing 1</div>
        <div>thing 2</div>
    </div>
</header>

CSS

.splash-two {
    filter: invert(0.7);
    -webkit-filter: invert(0.7);
}

如何限制滤镜，以便只有背景图像受到影响，并且仅在第二次使用时受到影响？到目前为止，我已将所有受影响 children 的过滤器值重置为 0，但这似乎是一个笨拙的解决方法。

JavaScript 解决方案值得赞赏，但 jQuery 和其他库充其量只是次要解决方案。 Chrome/Firefox 是我唯一关心的浏览器。

Answer 1

您可以为此使用 ::before 或 ::after 伪元素。

body {
  margin: 0
}
[class*="splash"] {
  height: 50px;
  width: 100%
}
.splash-one {
  background: url("http://lorempixel.com/1600/900") no-repeat
}
.splash-two::before {
  filter: invert(.7);
  -webkit-filter: invert(.7);
  content: "";
  position: absolute;
  width: 100%;
  height: 50px;
  top: 50px;
  left: 0;
  background: url("http://lorempixel.com/1600/900") no-repeat;
  z-index:-1
}

<header class="header">
  <div class="splash splash-one">Page Title</div>
  <div class="splash splash-two">
    <div>thing 1</div>
    <div>thing 2</div>
  </div>
</header>

重复使用带过滤器的背景图像

Reusing background image with filter

html

css

pageload

css-filters