看了大漠老师的文章，感觉这是个很有意思的存在，于是自己开始捣鼓起来
首先，我们看下这个神奇的属性mix-blend-mode
mix-blend-mode属性规定了源元素如何将颜色和背景混和起来。背景可以是源元素之下的任何元素（例如，一个标题是一个源元素，而包裹自己的div容器是背景元素如果你为一个元素应用了mix-blend-mode属性，它会把自己的颜色和任意跟它叠加在一起的元素混和起来。
这就代表着，它不仅仅可以使得图片混合，还可以是单纯的颜色，
我开始了我的代码
我在网络上找了两张图片，
boy_300.png
[图片上传中...(boy_300.png-fd6d4b-1537242390436-0)]
并且新建了一个测试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>
对图片进行定位重叠，并且对第一张图片使用了mix-blend-mode属性，进行颜色减淡操作，
但结果却是这样的：
image.png
第二张图片遮盖了第一张，我设置的属性没点效果，后面发现原来需要对第二张图片设置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
这就是最后结果，感觉很赞，
这些值都可以产生神奇的效果哦，大家可以试一试
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
