前言
在photoshop中，我们处理图片，在图层之间有混合模式，点击混合模式里面的选项，可以使图片实现不同的效果，这个混合模式在css3中也有实现！下面就来介绍一下css3的混合模式。css3的混合模式主要使用mix-blend-mode这个属性来实现的。当然，也可以用background-blend-mode。下面我就来介绍一下这2个属性吧！
mix-blend-mode
其实这个用法很简单，就是在你需要混合的div上面添加这个属性就可以了，例如如下：
mix-blend-mode: multiply;multiply，这个就是我们ps中的正片叠底！
类似的属性我列举一下！如下：
mix-blend-mode: normal; //正常
mix-blend-mode: multiply; //正片叠底
mix-blend-mode: screen; //滤色
mix-blend-mode: overlay; //叠加
mix-blend-mode: darken; //变暗
mix-blend-mode: lighten; //变亮
mix-blend-mode: color-dodge; //颜色减淡
mix-blend-mode: color-burn; //颜色加深
mix-blend-mode: hard-light; //强光
mix-blend-mode: soft-light; //柔光
mix-blend-mode: difference; //差值
mix-blend-mode: exclusion; //排除
mix-blend-mode: hue; //色相
mix-blend-mode: saturation; //饱和度
mix-blend-mode: color; //颜色
mix-blend-mode: luminosity; //亮度
mix-blend-mode: initial; //初始
mix-blend-mode: inherit; //继承
mix-blend-mode: unset; //复原mix-blend-mode默认情况下是会混合所有比起层叠顺序低的元素的，如果我们希望值混合某一两个元素，而不是全部，该怎么办呢？
isolation:isolate
我们可以使用isolation属性将文字和它的包裹元素隔离起来，使它们不和背景图片进行混合。
.haorooms {
isolation: isolate;
} 这样，文字就不会和背景混合了！
background-blend-mode
这个更好理解一点，background-blend-mode，里面有个background，意思是背景的混合模式。可以是背景图片之间的混合，也可以是背景图片和背景色的混合！具体参数和mix-blend-mode一样！这里就不一一列举了！
background-blend-mode:darken变暗！记住：这个是背景图片之间或者背景图片和背景色的混合的混合啊！
demo演示
为了让大家更加直观，我简单的写了一个demo，比较丑，大家将就着看吧！
假如在此页面中不好操作，大家可以新窗口打开demo，新窗口地址：http://resource.haorooms.com/uploads/demo/new/css3_mix/text.html
第一个案例是mix-blend-mode应用，
第二个案例是mix-blend-mode结合isolation:isolate的使用，大家可以对比一下！注意用的是文字啊！
第三个案例则是background-blend-mode的演示！
大家可以在案例下面选择框里面选择各个属性，进行测试！
我把这个案例上传到haorooms前端资源库了！有需要下载案例的同学，可以去资源库下载！