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

我有一个蓝图，我想绝对定位在上面的div，以突出某些房间

使用alpha通道rgba，我仍然可以看到下面蓝图的墨水，但根据颜色饱和度，图形会变得模糊

我知道我可以使用背景混合模式：在包含蓝图的div上倍增以获得所需的效果，但它将其应用于整个图像，因为我必须在同一个div上指定颜色和图像。这很难解释，但很容易显示，因此我在这里用paint.net模拟了它：

---

同样，我可以使用背景混合模式获得所需的外观，但会将其应用于整个背景图像。我想要一个div的颜色乘以它下面的所有颜色

好吧，我开始写这个问题，发现这是一个浏览器支持问题。我最终找到了混合混合模式，它将混合模式应用于div/元素下的所有内容，不幸的是，Chrome到今天都不支持它。然而，Firefox确实如此。可以在chrome中打开它，直到chrome://flags/ 并启用实验性Web平台功能

我发现下面的链接大体上非常有用，我只是不知道他们同时讨论了背景混合模式和混合混合模式

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

---

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

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

.测试{ 宽度：400px； 高度：200px； 背景图像：线性渐变浅绿色，浅绿色，urlhttp://i.stack.imgur.com/DfAyW.png; 背景混合模式：倍增； 背景尺寸：100px 140px，封面； 背景位置：10px40px，0px0px； 背景重复：无重复； }