多種混合模式的應用順序是什麼？

Question

我有以下的CSS代碼：

div { 
    background: url('image-url'), linear-gradient(gradient), url('image-url-2'); 
    background-blend-mode: blend-mode-1, blend-mode-2; 
} 

梯度或URL背景的位置可改變。我認爲這對混合順序應該有任何影響。我的問題是如何應用這些模式來計算最終值？

不要瀏覽器首先對url('image-url')和linear-gradient(gradient)適用blend-mode-1後來申請blend-mode-2上第一的結果，url('image-url-2')或者是周圍的其他方式？

我使用正確數量的背景混合模式還是需要指定其中的3個？

Answer 1

背景圖像的堆疊順序是關鍵因素。

您的背景圖像以相反的順序堆疊，列表中的第一個圖像是渲染堆棧中最上面的圖像。

blendmodes應用爲在背景上應用的任何逗號分隔屬性，第一個到第一個圖像，第二個到第二個，等等。

在你的榜樣

div { 
    background: url('image-url'), linear-gradient(gradient), url('image-url-2'); 
    background-blend-mode: blend-mode-1, blend-mode-2; 
} 

URL2是在底部。

在上面，你有漸變，應用了blend-mode-2。

而在它上面，圖像-URI與混合模式-1。

您可以設置第三種背景混合模式。在這種情況下，它將適用於image-url-2和背景顏色之間的混合（你沒有在你的例子中設置，但可以設置）