css3 mix-blend-mode 混合模式 該屬性不僅可以作用於HTML，還可以作用於SVG 相容性： IE 8~11 Edge 12~14 Firefox 41~47 chrome 45~51 Safari 7~9.1 支持的值很多： mix-blend-mode:normal; //正常
css3 mix-blend-mode 混合模式
該屬性不僅可以作用於HTML，還可以作用於SVG
相容性： IE 8~11 Edge 12~14 Firefox 41~47 chrome 45~51 Safari 7~9.1
支持的值很多：
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:color; //顏色
mix-blend-mode:luminosity; //亮度
mix-blend-mode:initial; //初始
mix-blend-mode:inherit; //繼承
mix-blend-mode:unset; //複原
css3 background-blend-mode 背景混合模式
可以是背景圖片見的混合模式，也可以是背景圖片和背景色的混合。
相容性： IE 8~11 Edge 12~14 Firefox 41~47 chrome 45~51 Safari 7~9.1
CSS3 backgrounds多背景IE9+瀏覽器就開始支持了，因此，你想混合多圖，就是要逗號，一個一個寫在background屬性中就可以了，
.box {
background: url(mm1.jpg) no-repeat center, url(mm2.jpg) no-repeat center;
}
css3 isolation:isolate 隔離
值除了萬年不變的inherit外還包括auto和isolate
isolation:isolate 的原理：本質上是因為 isolation:isolate 創建一個新的層疊上下文。
只要有元素可以創建層疊上下文，就可以阻斷mix-blend-mode
1.z-index值不為auto的position:relative/position:absolute定位元素。
2.position:fixed，僅限Chrome瀏覽器，其他瀏覽器遵循上一條，需要z-index為數值。
3.z-index值不為auto的flex項(父元素display:flex|inline-flex)。
4.元素的opacity值不是1。
5.元素的transform值不是none。
6.元素mix-blend-mode值不是normal。
7.元素的filter值不是none。
8.will-change指定的屬性值為上面任意一個。
9.元素的-webkit-overflow-scrolling設為touch。
