看了大漠老師的文章，感覺(jué)這是個(gè)很有意思的存在碎捺，于是自己開(kāi)始搗鼓起來(lái)
首先路鹰，我們看下這個(gè)神奇的屬性mix-blend-mode
mix-blend-mode屬性規(guī)定了源元素如何將顏色和背景混和起來(lái)。背景可以是源元素之下的任何元素（例如收厨，一個(gè)標(biāo)題是一個(gè)源元素晋柱，而包裹自己的div容器是背景元素如果你為一個(gè)元素應(yīng)用了mix-blend-mode屬性，它會(huì)把自己的顏色和任意跟它疊加在一起的元素混和起來(lái)诵叁。
這就代表著雁竞，它不僅僅可以使得圖片混合，還可以是單純的顏色拧额，
我開(kāi)始了我的代碼
我在網(wǎng)絡(luò)上找了兩張圖片碑诉，
boy_300.png
[圖片上傳中...(boy_300.png-fd6d4b-1537242390436-0)]
并且新建了一個(gè)測(cè)試html，
<div class="test-box">
<img src="./boy_300.png" style="mix-blend-mode: color-dodge;" alt="">
<img src="./girl_300.png" alt="" style="z-index: -1;">
</div>
<style>
.test-box {
position: relative;
}
.test-box img {
position: absolute;
border-radius: 10px;
display: block;
top: 0;
left: 0;
}
</style>
對(duì)圖片進(jìn)行定位重疊侥锦，并且對(duì)第一張圖片使用了mix-blend-mode屬性进栽，進(jìn)行顏色減淡操作，
但結(jié)果卻是這樣的：
image.png
第二張圖片遮蓋了第一張恭垦，我設(shè)置的屬性沒(méi)點(diǎn)效果快毛，后面發(fā)現(xiàn)原來(lái)需要對(duì)第二張圖片設(shè)置index
<div class="test-box">
<img src="./boy_300.png" style="mix-blend-mode: color-dodge;" alt="">
<img src="./girl_300.png" alt="" style="z-index: -1;">
</div>
image.png
這就是最后結(jié)果，感覺(jué)很贊番挺，
這些值都可以產(chǎn)生神奇的效果哦祸泪，大家可以試一試
Normal Multiply Screen Overlay Darken Lighten Color-Dodge Color Burn Hard-Light Soft-Light Difference Exclusion Hue Saturation``Color Luminosity原文: http://www.w3cplus.com/css3/getting-to-know-css-blend-modes.html ? w3cplus.com
