本文歡迎分享與聚合，全文轉(zhuǎn)載就不必了，尊重版權(quán)，圈子就這么大，若急用可以聯(lián)系授權(quán)。

一、可能都知道的

首先，講兩點(diǎn)大家可能都知道的知識(shí)點(diǎn)：

1.background-blend-mode 本身就帶有隔離特性，也就是一個(gè)元素應(yīng)用 background-blend-mode 背景混合模式，最終的效果只會(huì)受當(dāng)前元素的背景圖像和背景顏色影響，不會(huì)受視覺上處于當(dāng)前區(qū)域其他任意元素影響。

2.應(yīng)用 background-blend-mode 屬性后，不僅各個(gè)圖像之間要進(jìn)行混合，同時(shí)還要和背景色進(jìn)行混合。

接下來，講下大家可能并不知道的知識(shí)點(diǎn)，這也是很多人搞不清楚為什么 background-blend-mode 屬性這么渲染的原因。

二、可能不知道的

1. 背景順序影響混合效果

混合效果和 background 屬性中背景圖像的順序密切相關(guān)。在CSS多背景中，越是語法中靠后的背景圖像的層級(jí)越是低，這也是為何 background-color 要寫在最后語法才合法的原因，因?yàn)楸尘吧膶蛹?jí)永遠(yuǎn)是最低的。

例如下面2個(gè)元素：

<div class="ball"></div>
<div class="ball2"></div>

設(shè)置背景混合模式為疊加，但是兩個(gè)元素的背景圖像的順序是相反的，代碼如下所示：

.ball {
    width: 200px; height: 200px;
    border-radius: 50%;
    background: linear-gradient(deeppink, deeppink), linear-gradient(deepskyblue, deepskyblue);
    /* 應(yīng)用疊加混合模式 */
    background-blend-mode: overlay;
}
.ball2 {
    width: 200px; height: 200px;
    border-radius: 50%;
    background: linear-gradient(deepskyblue, deepskyblue), linear-gradient(deeppink, deeppink);
    /* 應(yīng)用疊加混合模式 */
    background-blend-mode: overlay;
}

結(jié)果下圖所示， .ball 元素表現(xiàn)為 deeppink 疊加后面的 deepskyblue ，最終混合顏色偏藍(lán)； .ball2 元素表現(xiàn)為 deepskyblue 疊加后面的 deeppink ，最終混合顏色偏紫。

2. 混合效果是多個(gè)混合屬性同時(shí)作用的結(jié)果

很多開發(fā)人員并不清楚， background-blend-mode 支持其實(shí)是可以設(shè)置多個(gè)混合模式值，分別對(duì)應(yīng)不同的背景圖像，這一點(diǎn)和僅僅支持一個(gè)混合模式值的 mix-blend-mode 屬性是不一樣的。例如：

.ball {
    background: linear-gradient(deeppink, deeppink), 
        linear-gradient(deepskyblue, deepskyblue);
    background-blend-mode: overlay;
}

實(shí)際上等同于：

.ball {
    background: linear-gradient(deeppink, deeppink), 
        linear-gradient(deepskyblue, deepskyblue);
    background-blend-mode: overlay overlay;
}

也就是， deeppink 實(shí)際上疊加的是deepskyblue和背景色（此例是透明）， deepskyblue 疊加的是背景色（此例是透明）。

換言之，實(shí)際上，每個(gè)背景圖像都有一個(gè)自己的混合模式值，這是和 mix-blend-mode 屬性有著巨大區(qū)別的！通常，在使用 mix-blend-mode 屬性的場(chǎng)景中，我們只會(huì)把混合模式設(shè)置在頂層元素上，而不會(huì)每一層元素都設(shè)置，于是帶來了一個(gè)由此及彼的嚴(yán)重的思維誤區(qū)，以為背景混合模式設(shè)置的值也是作用在對(duì)頂層的背景圖像上的，從而導(dǎo)致很多開發(fā)者想不通 background-blend-mode 屬性的渲染表現(xiàn)和自己預(yù)期的不一樣。

我們通過一個(gè)案例演示下 background-blend-mode 屬性的多個(gè)值是如何和背景圖像一一對(duì)應(yīng)的。

<div class="box"></div>

.box {
    width: 200px; height: 200px;
    background: linear-gradient(to right bottom, deeppink 50%, transparent 50%),
        linear-gradient(to top right, deeppink 50%, transparent 50%), 
        darkblue;
    background-blend-mode: multiply, screen;
    position: relative;
}
/* 中間原始的deeppink色值 */
.box::before {
    content: '';
    position: absolute;
    width: 33%; height: 33%;
    inset: 0;
    margin: auto;
    background-color: deeppink;
}

此時(shí) .box 元素總共呈現(xiàn)出了5種顏色，每種顏色的RGB色值和如何產(chǎn)生的如下圖所示。

其中：

中間標(biāo)注了序號(hào)①的正方形區(qū)域沒有應(yīng)用任何混合模式，顏色就是 deeppink ，作用是方便大家和區(qū)域③、區(qū)域⑤處的顏色進(jìn)行對(duì)比。

• 區(qū)域②就是背景色 darkblue ，因?yàn)閮蓚€(gè)斜向漸變均沒有覆蓋到這個(gè)區(qū)域，直接暴露了設(shè)置的背景色。
• 區(qū)域③和區(qū)域⑤是下層漸變，也就是 background 屬性值中位置靠后的漸變，對(duì)應(yīng)的混合模式也是 background-blend-mode 屬性值靠后的那個(gè)，也就是 screen ，濾色模式，可以讓顏色變亮。
• 區(qū)域④和區(qū)域⑤是上層漸變，也就是 background 屬性值中位置靠前的漸變，對(duì)應(yīng)的混合模式也是 background-blend-mode 屬性值靠前的那個(gè)，也就是 multiply ，正片疊底模式，可以讓顏色變暗。
• 區(qū)域③的顏色表現(xiàn)源自漸變色 deeppink 和背景色 darkblue 進(jìn)行濾色混合的效果，可以看出最終呈現(xiàn)的顏色比 deeppink 更亮了，最終混合后的色值是 rgb(255,20,206) 。
• 區(qū)域④的顏色表現(xiàn)源自漸變色 deeppink 和背景色 darkblue 進(jìn)行正片疊底混合的效果，可以看出最終呈現(xiàn)的顏色比 darkblue 更深了，最終混合后的色值是 rgb(0,0,80) 。
• 區(qū)域⑤最復(fù)雜，理解了這個(gè)，也就理解了大多數(shù)的 background-blend-mode 屬性的渲染表現(xiàn)了。
• 區(qū)域⑤總共有3層，分別是：上層的 deeppink ，混合模式是 multiply ；下層的 deeppink ，混合模式是 screen ；底層的背景色 darkblue 。

于是，最終的色值表現(xiàn)是上層的 deeppink 使用 multiply 混合下層的 deeppink 和背景色 darkblue 使用 screen 混合后的色值。

由于下層的 deeppink 和背景色 darkblue 使用 screen 混合后的色值就是區(qū)域③的顏色。因此，區(qū)域⑤的顏色就是 deeppink 和區(qū)域③的色值 rgb(255,20,206) 進(jìn)行正片疊底混合后的色值，結(jié)果是 rgb(255,1,119) 。

以上就是 .box 元素5個(gè)顏色各自呈現(xiàn)的原理所在。

三、background-blend-mode與漸變圖標(biāo)的實(shí)現(xiàn)

最后再看看看，為何大多數(shù)人沒辦法使用 background-blend-mode 實(shí)現(xiàn)漸變圖標(biāo)的效果。

例如，現(xiàn)在有1個(gè)顏色很深的刪除小圖標(biāo)，理論上，我們可以使用 lighten 混合模式實(shí)現(xiàn)漸變效果，因?yàn)?lighten 的效果是哪個(gè)顏色淺使用哪個(gè)顏色，由于圖標(biāo)本身顏色很深，因此，一定會(huì)顯示漸變色，只要給圖標(biāo)加一個(gè)白色底就可以，于是，按照這個(gè)思路，很多人就寫了如下所示的CSS代碼：

.icon-delete {
    background: linear-gradient(deepskyblue, deeppink), 
        url(delete.png), white;
    background-blend-mode: lighten;
}

乍一看，似乎邏輯上無懈可擊，漸變和白底黑色的圖標(biāo)進(jìn)行變亮混合，怎么想黑色圖標(biāo)也應(yīng)該變成漸變色啊，很遺憾，最終的漸變并不是漸變色，而是純白色，為什么會(huì)有這樣的結(jié)果呢？

那是因?yàn)檫@里的 background-blend-mode:lighten 實(shí)際上是一個(gè)縮寫，或者簡(jiǎn)寫，實(shí)際上真實(shí)的計(jì)算值是 lighten lighten ，代碼如下所示：

.icon-delete {
    background: linear-gradient(deepskyblue, deeppink), 
        url(delete.png), white;
    /* 實(shí)際上的計(jì)算值 */
    background-blend-mode: lighten lighten;
}

也就是刪除圖標(biāo) delete.png 也應(yīng)用了混合模式 lighten ，和白色背景色進(jìn)行了混合，于是變成了純白色。

知道了問題所在，也就知道了該如何解決了，很簡(jiǎn)單，讓 delete.png 和白色背景色混合后還保持原始圖標(biāo)的模樣即可，下面兩種CSS方法均可以：

.icon-delete {
    background: linear-gradient(deepskyblue, deeppink), 
        url(delete.png), white;
    /* PNG圖標(biāo)的混合模式單獨(dú)設(shè)成darken */
    background-blend-mode: lighten darken;
}

或者是：

.icon-delete {
    background: linear-gradient(deepskyblue, deeppink), 
        url(delete.png), white;
    /* PNG圖標(biāo)的混合模式單獨(dú)設(shè)成normal */
    background-blend-mode: lighten normal;
}

推薦使用 normal 關(guān)鍵字，因?yàn)楦擅?，性能也更好一點(diǎn)。最終實(shí)現(xiàn)的效果如下圖所示。

當(dāng)然，漸變圖標(biāo)效果最好的實(shí)現(xiàn)方法肯定是 CSS mask 遮罩屬性 ，這里的使用混合模式實(shí)現(xiàn)的漸變圖標(biāo)會(huì)有白色的底，并不是完美的實(shí)現(xiàn)方法，主要目的還是讓大家了解 background-blend-mode 屬性的渲染細(xì)節(jié)。

四、background-blend-mode的補(bǔ)全規(guī)則

當(dāng) background-blend-mode 的屬性值的數(shù)量和 background-image 不匹配的時(shí)候，遵循下面的應(yīng)用規(guī)則：

如果 background-blend-mode 的值的數(shù)量大于 background-image ，則多出來的混合模式會(huì)被忽略，例如：

.example { 
    background: linear-gradient(deepskyblue, deeppink), white;
    background-blend-mode: lighten, darken;
}

等同于：

.example { 
    background: linear-gradient(deepskyblue, deeppink), white;
    background-blend-mode: lighten;
}

如果 background-blend-mode 的值的數(shù)量少于 background-image ，則會(huì)重復(fù)完整的 background-blend-mode 屬性值進(jìn)行補(bǔ)全，例如：

.example { 
    background: linear-gradient(deepskyblue, deeppink), 
        linear-gradient(deepskyblue, deeppink),
        linear-gradient(deepskyblue, deeppink), white;
    background-blend-mode: lighten, darken;
}

等同于：

.example { 
    background: linear-gradient(deepskyblue, deeppink), 
        linear-gradient(deepskyblue, deeppink),
        linear-gradient(deepskyblue, deeppink), white;
    background-blend-mode: lighten, darken, lighten;
}

也就是 lighten, darken 一起進(jìn)行重復(fù)，而不是僅僅重復(fù)最后一個(gè)混合模式值。因此，補(bǔ)全的值的 lighten 。

五、結(jié)語

CSS background-blend-mode 屬性可以讓各個(gè)背景圖像之間應(yīng)用混合模式。

background-blend-mode 屬性的使用頻率要明顯低于 mix-blend-mode 屬性。

原因在于：

1.真實(shí)世界的照片圖像很少作為 background-image 背景圖像呈現(xiàn)，因?yàn)椴焕跓o障礙訪問，而混合模式設(shè)計(jì)的初衷就是這類照片圖像的處理；

2.background-blend-mode 屬性作用機(jī)制不像 mix-blend-mode 屬性那么單純，很多開發(fā)人員并不能很好地駕馭。例如請(qǐng)使用混合模式讓透明背景的小圖標(biāo)變成漸變圖標(biāo)，使用 mix-blend-mode 屬性實(shí)現(xiàn)的人有很多，但是能夠使用 background-blend-mode 屬性實(shí)現(xiàn)的人寥寥無幾。

因此，目前 background-blend-mode 屬性更常見的應(yīng)用是用來豐富CSS的背景紋理，例如：

具體就不展開，非本文主要內(nèi)容。

本文地址： https://www.zhangxinxu.com/wordpress/?p=9499

到此這篇關(guān)于深入理解CSS background-blend-mode的作用機(jī)制的文章就介紹到這了,更多相關(guān)CSS background-blend-mode的作用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！