我有一个蓝图，我想将 div 绝对定位在其顶部以突出显示某些房间。
使用 alpha channel (rgba)，我仍然可以看到蓝图下方的“墨水”，但根据颜色饱和度，绘图会变得模糊不清。
我知道我可以在包含蓝图的 div 上使用 background-blend-mode: multiply 以获得所需的效果，但它会将它应用于整个图像，因为我必须在同一个 div 上指定颜色和图像。这很难解释但很容易展示，所以我在这里用 paint.net 模拟了它:
同样，我可以使用 background-blend-mode 获得所需的外观，但会将其应用于整个背景图像。我想要 div 中的颜色 multiply 它下面的所有内容。
最佳答案
好吧，我开始写这个问题，发现这是一个浏览器支持问题。我最终找到了 mix-blend-mode，它将混合模式应用于 div/元素“下方”的所有内容，不幸的是，Chrome(截至今天)不支持它。然而，Firefox 确实如此。可以在 chrome 中打开它，转到 chrome://flags/并启用“实验性 Web 平台功能”。
我发现以下链接总体上很有用，我只是没有意识到他们同时谈论背景混合模式和混合混合模式。 http://css-tricks.com/basics-css-blend-modes/
这是它在 firefox 中运行的截图:
关于css - 如何让 css 混合模式应用于不同的 "layers"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27694426/