看了大漠老师的文章，感觉这是个很有意思的存在，于是自己开始捣鼓起来
首先，我们看下这个神奇的属性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