css - 多个背景图像的背景混合模式

Question

我有这个代码:

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

如何仅在 Background.jpg 上应用 BACKGROUND-BLEND-MODE，而不在 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

如果您希望没有混合模式，那就是“正常混合模式”。