在具有背景图像的元素上方的 DOM 元素上使用 css 混合模式答案

【问题标题】：Using css blend mode on DOM element above the element with the background image在具有背景图像的元素上方的 DOM 元素上使用 css 混合模式
【发布时间】：2014-07-22 01:42:09
【问题描述】：

很好奇是否有人知道如何使用新的 css 属性 background-blend-mode 在比具有背景图像的元素更高（z-index）的元素（例如标题）上应用背景颜色需要混合吗？

我知道如何将背景图像、背景颜色和背景混合模式应用于同一元素，但我认为这样的方法也适用于页面的一小部分。我的网站有一张背景图片，但只希望标题的一部分与该背景混合不同的颜色...

感谢任何建议。

【问题讨论】：

Check it out 但大多数浏览器还不支持background-blend-mode..

标签： css

【解决方案1】：

经过一番挖掘，我发现mix-blend-mode 将完成我正在寻找的东西。看来background-blend-mode 和mix-blend-mode 即将发布到 Chrome 和 Firefox 的主要版本中。

我要注意的一件事是，混合模式不必通过多个图层工作，具体取决于您想要混合的图层之间的背景设置。您可能必须将mix-blend-mode 添加到其间的一层或多层。

【讨论】：