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>

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

1 个答案: