小編給大家分享一下CSS中background-blend-mode的作用機(jī)制的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)建站是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)建站推出建甌免費(fèi)做網(wǎng)站回饋大家。
一、可能都知道的
首先，講兩點(diǎn)大家可能都知道的知識(shí)點(diǎn)：
1.background-blend-mode 本身就帶有隔離特性，也就是一個(gè)元素應(yīng)用 background-blend-mode 背景混合模式，最終的效果只會(huì)受當(dāng)前元素的背景圖像和背景顏色影響，不會(huì)受視覺(jué)上處于當(dāng)前區(qū)域其他任意元素影響。
2.應(yīng)用 background-blend-mode 屬性后，不僅各個(gè)圖像之間要進(jìn)行混合，同時(shí)還要和背景色進(jìn)行混合。
接下來(lái)，講下大家可能并不知道的知識(shí)點(diǎn)，這也是很多人搞不清楚為什么 background-blend-mode 屬性這么渲染的原因。
二、可能不知道的
1. 背景順序影響混合效果
混合效果和 background 屬性中背景圖像的順序密切相關(guān)。在CSS多背景中，越是語(yǔ)法中靠后的背景圖像的層級(jí)越是低，這也是為何 background-color 要寫(xiě)在最后語(yǔ)法才合法的原因，因?yàn)楸尘吧膶蛹?jí)永遠(yuǎn)是最低的。
例如下面2個(gè)元素：
設(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é)果
很多開(kāi)發(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è)置，于是帶來(lái)了一個(gè)由此及彼的嚴(yán)重的思維誤區(qū)，以為背景混合模式設(shè)置的值也是作用在對(duì)頂層的背景圖像上的，從而導(dǎo)致很多開(kāi)發(fā)者想不通 background-blend-mode 屬性的渲染表現(xiàn)和自己預(yù)期的不一樣。
我們通過(guò)一個(gè)案例演示下 background-blend-mode 屬性的多個(gè)值是如何和背景圖像一一對(duì)應(yīng)的。
.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ū)域沒(méi)有應(yīng)用任何混合模式，顏色就是 deeppink ，作用是方便大家和區(qū)域③、區(qū)域⑤處的顏色進(jìn)行對(duì)比。
區(qū)域②就是背景色 darkblue ，因?yàn)閮蓚€(gè)斜向漸變均沒(méi)有覆蓋到這個(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ù)人沒(méi)辦法使用 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è)思路，很多人就寫(xiě)了如下所示的CSS代碼：
.icon-delete {
background: linear-gradient(deepskyblue, deeppink),
url(delete.png), white;
background-blend-mode: lighten;
}乍一看，似乎邏輯上無(wú)懈可擊，漸變和白底黑色的圖標(biāo)進(jìn)行變亮混合，怎么想黑色圖標(biāo)也應(yīng)該變成漸變色啊，很遺憾，最終的漸變并不是漸變色，而是純白色，為什么會(huì)有這樣的結(jié)果呢？
那是因?yàn)檫@里的 background-blend-mode:lighten 實(shí)際上是一個(gè)縮寫(xiě)，或者簡(jiǎn)寫(xiě)，實(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)行了混合，于是變成了純白色。
知道了問(wè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 ，則多出來(lái)的混合模式會(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é)語(yǔ)
CSS background-blend-mode 屬性可以讓各個(gè)背景圖像之間應(yīng)用混合模式。
background-blend-mode 屬性的使用頻率要明顯低于 mix-blend-mode 屬性。
原因在于：
1.真實(shí)世界的照片圖像很少作為 background-image 背景圖像呈現(xiàn)，因?yàn)椴焕跓o(wú)障礙訪問(wèn)，而混合模式設(shè)計(jì)的初衷就是這類照片圖像的處理；
2.background-blend-mode 屬性作用機(jī)制不像 mix-blend-mode 屬性那么單純，很多開(kāi)發(fā)人員并不能很好地駕馭。例如請(qǐng)使用混合模式讓透明背景的小圖標(biāo)變成漸變圖標(biāo)，使用 mix-blend-mode 屬性實(shí)現(xiàn)的人有很多，但是能夠使用 background-blend-mode 屬性實(shí)現(xiàn)的人寥寥無(wú)幾。
因此，目前 background-blend-mode 屬性更常見(jiàn)的應(yīng)用是用來(lái)豐富CSS的背景紋理，例如：
以上是“CSS中background-blend-mode的作用機(jī)制的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
