对带有背景图片的元素上面的DOM元素使用css混合模式 [英] Using css blend mode on DOM element above the element with the background image

问题描述

如果有人知道如何使用新的css属性background-blend-mode在一个比具有背景图片的元素（z-index）高的元素（例如标题）上应用背景颜色需要混合？

Was curious if anyone knew how to apply a background-color using the new css property background-blend-mode on an element (such as a header) that sits higher(z-index) than the element that has the background image that needs to be blended with?

我看到如何应用背景图像，背景颜色和背景混合模式到同一个元素，但我会认为像这样会工作的页面的一小块。我有一个背景图片为我的网站，但只想要一部分头混合不同的颜色与背景...

I see how you can apply a background image, a background color, and a background blend mode to the same element but I would think something like this would work for a small sliver of the page as well. I have a background image for my site but only want a portion of the header to blend a different color with that background...

我感谢任何建议。 >

I appreciate any suggestions.

推荐答案

经过一点挖掘，我发现 mix-blend-mode 将完成我想要的。看来 background-blend-mode 和 mix-blend-mode 正好在被释放到主要构建的Chrome和Firefox。

After a little more digging, I've discovered that the mix-blend-mode will accomplish what I'm looking for. It appears that background-blend-mode and mix-blend-mode are right on the cusp of being released into the main builds of Chrome and Firefox.

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

One thing I want to note is that the blend mode won't necessary work through multiple layers depending on your background settings of the layers in between what you want blended. You may have to add your mix-blend-mode to one or more layers in between.

这篇关于对带有背景图片的元素上面的DOM元素使用css混合模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！