css3 混合模式mix-blend-mode background-blend-mode 以及混合模式的隔断 isolation

css 混合模式

mix-blend-mode:

让 元素内容 和 这个元素 以及 下面的元素 发生混合

background-blend-mode 背景的混合模式

可以是背景图片的混合也可以是背景图片与背景颜色之间的混合

isolation是一个CSS3属性，顾名思意是“隔离”，支持的值除了万年不变的inherit外还包括auto和isolate.

我们希望混合模式只到某一个元素，或者只是某一组元素怎么办呢？isolation: isolate就是为了解决这个问题产生的。

只要元素可以创建层叠上下文，就可以阻断mix-blend-mode！

于是，不仅仅是isolation:isolate，下面这些也是可以的：

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.

isolation:isolate之所以可以阻断混合模式的进行，本质上是因为isolation:isolate创建一个新的层叠上下文(stacking context)。

background-blend-mode天生是一个封闭的混合领域，不会影响其他元素。