在CSS中我們可以通過(guò)background-blend-mode和mix-blend-mode來(lái)應(yīng)用混合模式這一強(qiáng)大的效果。這一效果仿佛能夠讓我們?cè)跒g覽器中進(jìn)行P圖。
在詳細(xì)介紹這兩個(gè)屬性之前，我們現(xiàn)在先了解一下它們都會(huì)用的值類型<blend-mode>。
一、blend-mode
blend-mode是CSS的一種值類型。它用于描述當(dāng)元素重疊時(shí)顏色該如何展示?？梢杂糜赽ackground-blend-mode和mix-blend-mode這兩個(gè)屬性。
當(dāng)應(yīng)用了混合模式后，這一屬性會(huì)根據(jù)特定的算法將重疊的前景（頂）色和背景（底）色生成一個(gè)新的顏色值。
blend-mode數(shù)據(jù)類型可以指定下面16個(gè)關(guān)鍵字，分別為：normal，multiply，screen，overlay，darken，lighten，color-dodge，color-burn，hard-light，soft-light，difference，exclusion，hue，saturation，color，luminosity。示例demo鏈接可點(diǎn)擊跳轉(zhuǎn)（http://code.h5jun.com/roca），可以分別選擇不同的混合模式來(lái)應(yīng)用效果。
normal 正常模式。這個(gè)比較簡(jiǎn)單也比較好理解。最終的顏色會(huì)忽略下面被覆蓋的顏色，直接顯示為上面的顏色。
multiply 正片疊底模式。最終的顏色是頂色和底色相乘。黑色疊加后結(jié)果會(huì)變成黑色，白色疊加時(shí)不變。
screen 屏幕模式。與正片疊底模式相反，合成圖層的效果是顯現(xiàn)兩圖層中較高的灰階，而較低的灰階則不顯現(xiàn)（即淺色出現(xiàn)，深色不出現(xiàn)），產(chǎn)生一幅更加明亮的圖像。黑色疊加后顏色不變，白色疊加結(jié)果為白色。
overlay 疊加模式。如果底色更深則最終結(jié)果為multiply的結(jié)果；如果底色更淺，則最終結(jié)果為screen的結(jié)果。
darken 變暗模式。此關(guān)鍵字會(huì)對(duì)前后景顏色值的RGB值（即RGB通道中的顏色亮度值）分別進(jìn)行比較，取二者中低的值再組合成為混合后的顏色。
lighten 變亮模式。該模式與變暗模式相反，會(huì)對(duì)前后景色的RGB值進(jìn)行比較，取高值合成為混合后的顏色，從而達(dá)到變亮的效果。
color-dodge 顏色減淡。該模式會(huì)加亮背景顏色，形成鮮明對(duì)比的圖像。黑色的前景時(shí)，背景色保持不變。如果前景色是背景色的反差色，則會(huì)形成完全鮮明的顏色。該模式與screen模式類似。
color-burn 顏色加深。這種模式會(huì)加深背景色。白色前景時(shí)背景色不變。如果前景色是背景色的反差色，則會(huì)形成黑色的圖像。該模式與multiply模式類似。
hard-light 強(qiáng)光模式。該模式與overlay類似，但是圖層互換了。當(dāng)頂層顏色更深時(shí)最終結(jié)果為multiply，當(dāng)頂層顏色更淺時(shí)，則最終結(jié)果為screen。
soft-light 柔光模式。效果與overlay類似，但是有輕微的不同。作用時(shí)將頂層圖像以柔光的方式是加到底層。
difference 差值模式。應(yīng)用該模式時(shí)，最后的顏色為較淺的顏色減去較深的顏色。當(dāng)有一層為黑色時(shí)，則另一層不變。當(dāng)有一個(gè)層為白色時(shí)，則另一層會(huì)變?yōu)榉崔D(zhuǎn)色。
exclusion 排除模式。最終的顏色與差值模式類似，但是對(duì)比度更小。
hue 色調(diào)模式。最終的顏色會(huì)使用頂色的色相，加上底色的飽和度和亮度。
saturation 飽和度模式。與hue類似，最終的顏色會(huì)使用頂色的飽和度加上底色的色調(diào)和亮度。
color 顏色模式。最終的顏色會(huì)使用頂色的飽和度和色調(diào)加上底色的亮度。
luminosity 亮度模式。最終的顏色會(huì)使用頂色的亮度加上底色的色調(diào)和飽和度。
除了常規(guī)模式，一共有15種混合模式，想要準(zhǔn)確地記住所有模式的原理其實(shí)比較困難。所以我們可以將其簡(jiǎn)單分為幾類，當(dāng)我們需要某一類效果時(shí)，可以直接縮減范圍，嘗試滿足這一類效果的混合模式。這樣使用起來(lái)更快捷。
如下我們可以將15中混合模式分為5類：
變暗：multiply，darken，color-burn
變亮：screen，lighten，color-dodge
調(diào)整對(duì)比度：overlay，hard-light，soft-light
反差：difference，exclusion
顏色組成：hue，saturation，color，luminosity
二、background-blend-mode
通過(guò)background-blend-mode，我們可以將背景圖片混合到一起，也可以將背景圖片與背景顏色混合。如下我們可以很簡(jiǎn)單地將一個(gè)陰天的圖片通過(guò)混合的方式變成碧藍(lán)的天空（代碼鏈接）。
<pre class="" style="margin: 0.5em 0px; padding: 1em; max-width: 100%; box-sizing: border-box !important; overflow-wrap: normal; border-width: 0px; border-style: initial; border-color: initial; overflow: auto; background: rgb(45, 45, 45); color: rgb(204, 204, 204); font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none;">
div.blended {
background: url(http://p9.qhimg.com/t012932e87662183569.jpg);
background-color: #09a8e0;
background-blend-mode: multiply;
}
</pre>
注意：當(dāng)背景圖與背景色進(jìn)行混合時(shí)，背景圖算作前景色，與代碼順序無(wú)關(guān)。
簡(jiǎn)單的三句CSS達(dá)到了PS的效果，是不是還是很給力的。其實(shí)這里比較簡(jiǎn)單，想要達(dá)到更好的效果還可以通過(guò)多層背景混合來(lái)實(shí)現(xiàn)。下面我們來(lái)一起試一試。
<pre class="" style="margin: 0.5em 0px; padding: 1em; max-width: 100%; box-sizing: border-box !important; overflow-wrap: normal; border-width: 0px; border-style: initial; border-color: initial; overflow: auto; background: rgb(45, 45, 45); color: rgb(204, 204, 204); font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none;">
background: url(http://p6.qhimg.com/t0110da9f699fc645b4.png),
url(http://p0.qhimg.com/t01628bd068d6f37961.png), url(http://p2.qhimg.com/t0160c558d31f4d5202.png), url(http://p9.qhimg.com/t012932e87662183569.jpg), linear-gradient(#0aa0fe 0%, #baf5ff 55%, #85c1cb 55%);background-blend-mode: lighten, lighten, lighten, multiply, darken;
</pre>
如上，我們通過(guò)多背景的混合實(shí)現(xiàn)了更好看點(diǎn)圖像，效果圖如下（左側(cè)為未應(yīng)用混合模式的效果）。我們通過(guò)漸變實(shí)現(xiàn)了天的漸變藍(lán)與水的綠，并且額外增加了三朵漂浮的云朵。（示例代碼）
注意，當(dāng)存在多背景時(shí)，background-blend-mode混合模式的順序與background-img屬性一致。如果混合模式的值長(zhǎng)度小于背景圖的值長(zhǎng)度，則會(huì)重復(fù)混合模式的值，循環(huán)匹配。如果大于背景圖的值長(zhǎng)度，則會(huì)被截取。
三、mix-blend-mode
mix-blend-mode可以設(shè)置元素的內(nèi)容如何和父元素以及元素背景混合。
同樣針對(duì)上面多背景的例子，我們可以通過(guò)多元素的方式進(jìn)行試下。如下（示例代碼）：
HTML代碼：
<pre class="" style="margin: 0.5em 0px; padding: 1em; max-width: 100%; box-sizing: border-box !important; overflow-wrap: normal; border-width: 0px; border-style: initial; border-color: initial; overflow: auto; background: rgb(45, 45, 45); color: rgb(204, 204, 204); font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none;">
<div class="wrapper">
<div class="img"></div>
<div class="cloud cloud1"></div>
<div class="cloud cloud2"></div>
<div class="cloud cloud3"></div>
</div>
</pre>
CSS代碼：
效果圖如下：<pre class="" style="margin: 0.5em 0px; padding: 1em; max-width: 100%; box-sizing: border-box !important; overflow-wrap: normal; border-width: 0px; border-style: initial; border-color: initial; overflow: auto; background: rgb(45, 45, 45); color: rgb(204, 204, 204); font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; word-spacing: normal; word-break: normal; line-height: 1.5; tab-size: 4; hyphens: none;">
.wrapper {
position: relative;
border: 1px solid #ddd;
margin-right: 5px;
width: 300px;
height: 200px;
background: linear-gradient(#0aa0fe 0%, #baf5ff 55%, #85c1cb 55%);
background-size: 100%;
background-position: center center;
background-repeat: no-repeat;
overflow: hidden;
}
.img {
width: 100%;
height: 100%;
background: url(http://p9.qhimg.com/t012932e87662183569.jpg);
background-size: 100%;
background-position: center center;
background-repeat: no-repeat;
mix-blend-mode: multiply;
}
.cloud {
position: absolute;
background-size: 100%;
background-position: center center;
background-repeat: no-repeat;
mix-blend-mode: lighten;
}
.cloud1 {
background-image: url(http://p6.qhimg.com/t0110da9f699fc645b4.png);
left: 30px;
top: 50px;
width: 60px;
height: 20px;
}
.cloud2 {
background-image: url(http://p0.qhimg.com/t01628bd068d6f37961.png);
left: 230px;
top: 50px;
width: 80px;
height: 30px;
}
.cloud3 {
background-image: url(http://p2.qhimg.com/t0160c558d31f4d5202.png);
left: 130px;
top: 25px;
width: 100px;
height: 30px;
}
</pre>
四、總結(jié)
本文為大家簡(jiǎn)單介紹了下CSS中的混合模式，并動(dòng)手制作了一個(gè)小示例。相信大家對(duì)于混合模式一定已經(jīng)有了一定的了解。其實(shí)除了這些之外，我們還可以在Canvas和SVG中應(yīng)用混合模式，如果大家感興趣可以擴(kuò)展一下，本文就不展開介紹了。
