css 混合模式学习

看了大漠老师的文章，感觉这是个很有意思的存在，于是自己开始捣鼓起来
首先，我们看下这个神奇的属性mix-blend-mode
mix-blend-mode属性规定了源元素如何将颜色和背景混和起来。背景可以是源元素之下的任何元素（例如，一个标题是一个源元素，而包裹自己的div容器是背景元素如果你为一个元素应用了mix-blend-mode属性，它会把自己的颜色和任意跟它叠加在一起的元素混和起来。
这就代表着，它不仅仅可以使得图片混合，还可以是单纯的颜色，
我开始了我的代码
我在网络上找了两张图片，

boy_300.png

[图片上传中...(boy_300.png-fd6d4b-1537242390436-0)]

并且新建了一个测试html，

对图片进行定位重叠，并且对第一张图片使用了mix-blend-mode属性，进行颜色减淡操作，
但结果却是这样的：

image.png

第二张图片遮盖了第一张，我设置的属性没点效果，后面发现原来需要对第二张图片设置index

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