Question

是否有任何方法可以向元素添加过滤器（CSS或其他类型），以便此过滤器有效地应用于其下方的元素。

我有一个不透明度降低的元素，它位于背景图像的顶部。我希望不透明度降低的元素基本上将黑色和白色滤镜应用到其正下方的元素部分（有效地用作遮罩）。在下面的示例中，这意味着白色框下方的图像部分已应用了过滤器。

https://codepen.io/emilychews/pen/zWjWxo

有两点需要注意：

1）因为我正在使用vh和vw单元，并且布局会根据设备/窗口大小而变化，所以我无法在photoshop或类似设备中切片，然后单独添加或对齐。

2）我正在使用的图像占位符服务提供随机图像，有时示例中的图像是黑白的 - 请不要让这个问题混淆。

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}

#row-1 {
  position: relative;
  width: 80vw;
  height: 70vh;
  background: red;
  border: 1px solid black;
  background-image: url("https://loremflickr.com/320/240");
  background-size: cover;
}

#inner {
  background: rgba(255, 255, 255, .8);
  position: absolute;
  width: 50%;
  height: 40%;
  right: 0;
  top: 0;
  padding: 1rem;
}

<div id="row-1">
  <div id="inner">
    <p id="text">Some Text</p>
  </div>
</div>

Answer 1

您可以尝试mix-blend-mode

＆＃13;

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}

#row-1 {
  position: relative;
  width: 80vw;
  height: 70vh;
  background: red;
  border: 1px solid black;
  background-image: url("https://loremflickr.com/320/240");
  background-size: cover;
}

#inner {
  background: rgba(255, 255, 255, .8);
  position: absolute;
  width: 50%;
  height: 40%;
  right: 0;
  top: 0;
  padding: 1rem;
  mix-blend-mode: exclusion;
}

＆＃13;

<div id="row-1">
  <div id="inner">
    <p id="text"></p>
  </div>
</div>

＆＃13;

Answer 2

简短回答 - 不。但是有一个非标准的-webkit-back-drop过滤器适用于iOS，但它只能在实验标志后面的其他浏览器中使用。

https://webdesign.tutsplus.com/tutorials/css-backdrop-filters--cms-27314

（SVG 1.1有一个机制可以做到这一点，但规范写得不好，只有IE10 +曾经实现过它（他们可能已经支持了））

Answer 3

请尝试this solution I have made on Codepen。你可以玩Z-index＆amp; background-color中的不透明度。

它使用:after伪元素来进行某种过滤。在具有绝对位置的整个div处被拉伸，其下面的一切都将受到影响。

我希望它可以帮到你！

HTML：

<div class="box">
  <p>Hello world!</p>
</div>

CSS：

.box {
    position: relative;
  width: 400px;
  height: 300px;
  background: url(http://farm2.staticflickr.com/1486/23990047223_5b7a0c82e8_b.jpg);
  background-size: cover;
  margin: 0 auto 100px;
    z-index: 1;
}

.box:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
//  change color opacity here!
  background-color: rgba(0, 0, 0, 0.5);
}

// styling
.box p {
  margin: 0;
  font-size: 26px;
  text-align: center;
  color: white;
  padding-top: 50px;
  position: relative;
  z-index: 0;
}

在子元素上使用css-filter来影响其父元素

3 个答案: