在CSS中我們可以通過(guò)background-blend-mode和mix-blend-mode來(lái)應(yīng)用混合模式這一強(qiáng)大的效果塞蹭。這一效果仿佛能夠讓我們?cè)跒g覽器中進(jìn)行P圖棘脐。
在詳細(xì)介紹這兩個(gè)屬性之前姻几，我們現(xiàn)在先了解一下它們都會(huì)用的值類(lèi)型<blend-mode>棉姐。
一工碾、blend-mode
blend-mode是CSS的一種值類(lèi)型臭埋。它用于描述當(dāng)元素重疊時(shí)顏色該如何展示踪央。可以用于background-blend-mode和mix-blend-mode這兩個(gè)屬性瓢阴。
當(dāng)應(yīng)用了混合模式后畅蹂，這一屬性會(huì)根據(jù)特定的算法將重疊的前景（頂）色和背景（底）色生成一個(gè)新的顏色值碾局。
blend-mode數(shù)據(jù)類(lèi)型可以指定下面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模式類(lèi)似灌侣。
color-burn 顏色加深。這種模式會(huì)加深背景色裂问。白色前景時(shí)背景色不變侧啼。如果前景色是背景色的反差色，則會(huì)形成黑色的圖像堪簿。該模式與multiply模式類(lèi)似痊乾。
hard-light 強(qiáng)光模式。該模式與overlay類(lèi)似椭更，但是圖層互換了哪审。當(dāng)頂層顏色更深時(shí)最終結(jié)果為multiply，當(dāng)頂層顏色更淺時(shí)虑瀑，則最終結(jié)果為screen湿滓。
soft-light 柔光模式滴须。效果與overlay類(lèi)似，但是有輕微的不同叽奥。作用時(shí)將頂層圖像以柔光的方式是加到底層扔水。
difference 差值模式。應(yīng)用該模式時(shí)朝氓，最后的顏色為較淺的顏色減去較深的顏色魔市。當(dāng)有一層為黑色時(shí)，則另一層不變赵哲。當(dāng)有一個(gè)層為白色時(shí)嘹狞，則另一層會(huì)變?yōu)榉崔D(zhuǎn)色。
exclusion 排除模式誓竿。最終的顏色與差值模式類(lèi)似，但是對(duì)比度更小谈截。
hue 色調(diào)模式筷屡。最終的顏色會(huì)使用頂色的色相，加上底色的飽和度和亮度簸喂。
saturation 飽和度模式毙死。與hue類(lèi)似，最終的顏色會(huì)使用頂色的飽和度加上底色的色調(diào)和亮度喻鳄。
color 顏色模式扼倘。最終的顏色會(huì)使用頂色的飽和度和色調(diào)加上底色的亮度。
luminosity 亮度模式除呵。最終的顏色會(huì)使用頂色的亮度加上底色的色調(diào)和飽和度再菊。
除了常規(guī)模式，一共有15種混合模式颜曾，想要準(zhǔn)確地記住所有模式的原理其實(shí)比較困難纠拔。所以我們可以將其簡(jiǎn)單分為幾類(lèi)，當(dāng)我們需要某一類(lèi)效果時(shí)泛豪，可以直接縮減范圍稠诲，嘗試滿足這一類(lèi)效果的混合模式。這樣使用起來(lái)更快捷诡曙。
如下我們可以將15中混合模式分為5類(lèi)：
變暗：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ò)展一下费变，本文就不展開(kāi)介紹了摧扇。
