使用过滤器重用背景图像

Question

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

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

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);
}

如何限制过滤器，以便仅影响背景图像，并且仅在第二次使用时受到影响？到目前为止，我已将所有受影响儿童的过滤器值重置为 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>