是否可以将 css 混合模式应用于不同 div 中的元素？答案

【问题标题】：Is it possible to apply a css blend mode to an element in a different div?是否可以将 css 混合模式应用于不同 div 中的元素？
【发布时间】：2016-10-18 12:49:50
【问题描述】：

是否可以将 css 混合模式应用于不同 div 中的元素？

例如，我在一个 div 中有一个大的背景英雄图像。在该图像上方（在不同的 div 中）我有一个带有文本的蓝色半透明框。这个透明框是我想应用混合的对象，但它似乎不起作用，可能是因为它们不在同一个 div 中，例如示例 https://css-tricks.com/basics-css-blend-modes/

我在 wordpress 中工作，因此要重新构建 HTML 以便将图像和彩色框放在同一个 div 中会有点困难。

有人知道我可以使用什么技巧来实现这种方法吗？

提前致谢！

【问题讨论】：

您想将蓝色背景扩展到整个横幅图像还是仅显示文本？

标签： css wordpress transparent background-blend-mode mix-blend-mode

【解决方案1】：

使用mix-blend-mode。

演示：

http://plnkr.co/edit/R5TBohMs1jKfsPj7zcXt?p=preview

有两种使用混合模式的方法：

background-blend-mode：如果两个背景在同一个div中，则可以使用该属性。
mix-blend-mode：当你想混合2个不同元素的背景时，你可以使用mix-blend-mode属性。

代码：

HTML：

<div class="wrapper">
  <div class="first"></div>
  <div class="second"></div>
</div>

CSS：

div.wrapper {
  position: relative;
}
div.first,
div.second {
  width: 300px;
  height: 200px;
  position: absolute;
}
div.first {
  background: url(http://images.all-free-download.com/images/graphicthumb/male_lion_193754.jpg) 0 0 no-repeat;
  z-index: 9;
  top: 0px;
  left: 0px;
}
div.second {
  background: url(http://images.all-free-download.com/images/graphicthumb/canford_school_drive_dorset_514492.jpg) 0 0 no-repeat;
  z-index: 10;
  mix-blend-mode: difference;
  top: 30px;
  left: 120px;
}

【讨论】：

【解决方案2】：

这里有一个技巧：

您可以将两个 div 添加到一个 div 中。然后在 css 中可以为单个 div 添加两个背景。这样，您可以使用 background-blend-mode 属性来混合两个图像。

这是一个例子：https://jsfiddle.net/4mgt8occ/3/

【讨论】：

【解决方案3】：

您可以使用 :after 或 :before 在 img-div 中创建另一个元素。然后用rgba() 设置背景颜色。这里的0.2 是背景颜色的不透明度。对于文本 div，您无需对其执行任何操作。

div#wrapper::after {
    background-color: rgba(216, 223, 228, 0.2);
    display: block;
    width: 100%;
    height: 100%;
    content: ' ';
}

【讨论】：