背景 - 混合模式爲多背景圖片

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

如果你想要一個沒有混合模式，即「混合模式正常。」

Answer 2

有關多背景混合模式的好文章

https://css-tricks.com/chaining-multiple-blend-modes/