用于多个背景图像的背景混合模式

Question

我有这样的代码：

BACKGROUND-IMAGE: url("Background-2.png"), 
url("Background.jpg");

如何只在BACKGROUND-BLEND-MODE上应用Background.jpg而不是Background-2.png

Answer 1

如下所示：

<div style="width:300px; height:300px; background-color:#FF0000;
    background-image:url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode:darken,lighten;">
</div>

注意传递给混合模式样式的两个值。第一个影响第一个背景，第二个影响第二个。

https://jsfiddle.net/x7pjae50/

基于我在这里找到的语法：https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode

如果你想要一个没有混合模式，那就是“混合模式正常”。