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

Question

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

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

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

有没有人知道我可以用来实现这种方法的技巧？

提前致谢！

Answer 1

使用 mix-blend-mode 。

<强>样本：

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

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

1. background-blend-mode：如果背景都在同一个div中，则可以使用此属性。

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

Answer 2

这是一个技巧：

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

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

Answer 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: ' ';
}