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

【问题标题】：Using a css-filter on a child element to affect its parent在子元素上使用 css-filter 来影响其父元素
【发布时间】：2018-04-01 14:41:47
【问题描述】：

有没有办法给一个元素添加一个过滤器（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>

【问题讨论】：

据我所知，这在 css 和 html 中是不可能的。
@MobyMotion 我已将问题编辑为还包括 SVG，我认为这是我唯一的希望

标签： html css svg css-filters

【解决方案1】：

你可以试试mix-blend-mode

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

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

【讨论】：

嗨 Temani，我确实尝试了不同的混合模式，但它会产生不同的效果，我希望白框保持原样，具有微妙的不透明度，因此文本突出（这也是我想要的原因交叉区域为黑色和白色）。（还是）感谢你的建议。我不认为我想要的是可能的。

【解决方案2】：

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

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

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

【讨论】：

好的，谢谢迈克尔

【解决方案3】：

请尝试this solution I have made on Codepen。您可以在background-color 中使用 Z-index 和不透明度。

它使用: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;
}

【讨论】：