mix-blend-mode 混合模式 background-blend-mode 背景混合模式 isolation:isolate 隔離，mixblendmode

mix-blend-mode 混合模式 background-blend-mode 背景混合模式 isolation:isolate 隔離，mixblendmode

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。