如何让css混合模式应用于不同的“层”

Question

我有一个蓝图，我想绝对地将div放在上面，以便突出显示某些房间。

使用alpha通道(rgba)，我仍然可以看到蓝图下面的“墨水”，但根据颜色饱和度的不同，绘图会变得模糊。

我知道我可以在包含蓝图的div上使用background-blend-mode: multiply以获得所需的效果，但它会将其应用于整个图像，因为我必须在同一个div上指定颜色和图像。这很难解释，但很容易展示，所以我在这里用paint.net模拟了它：

​

​

同样，我可以使用background-blend-mode获得所需的外观，但会将其应用于整个背景图像。我想从一个div的颜色来multiply它下面的所有东西。

Answer 1

好吧，我开始写这个问题，发现这是一个浏览器支持问题。我最终找到了mix-blend-mode，它可以将混合模式应用到“在”div/元素下的所有东西上，不幸的是，Chrome (直到今天)还不支持它。然而，火狐做到了。可以在chrome中打开它，转到chrome://flag/并启用“实验性Web平台特性”。

我发现下面的链接总体上很有帮助，我只是没有意识到它们同时讨论了背景混合模式和混合混合模式。http://css-tricks.com/basics-css-blend-modes/

以下是它在firefox中工作的屏幕截图：

​

​

Answer 2

另一种方法是使用背景混合模式，并使用背景图像属性进行播放。

这不是一个很好的解决方案，但可以让你在等待Chrome下一版本发布之前就开始工作

​

.test {
   width: 400px;
  height: 200px;
  background-image: linear-gradient(lightgreen, lightgreen), url(http://i.stack.imgur.com/DfAyW.png);
  background-blend-mode: multiply;
  background-size: 100px 140px, cover;
  background-position: 10px 40px, 0px 0px;
  background-repeat: no-repeat;
  }

<div class="test"></div>

​