11.5 使用 isolation: isolate 声明隔离混合模式 #

isolation: isolate 声明的作用很单纯，就是用来隔离混合模式，限制混合模式的作用范围。

11.5.1 isolation 属性 #

isolation 属性除了支持全局关键字，还支持 auto 和 isolate 这两个关键字属性值，使用示例如下：

isolation: auto;
isolation: isolate;

具体分析如下。

• auto 是默认值，表示混合模式隔离与否根据具体情况而定。
• isolate 表示对混合模式进行隔离。

有时候我们希望混合模式效果只应用到某一个元素或某一组元素上，此时该怎么办呢？isolation:isolate 就是为了解决这个问题而生的。

实现的效果仅仅是两张图片发生混合，而不与渐变背景发生混合例子：

demo

11.5.2 isolation:isolate 声明的作用原理 #

isolation:isolate 声明之所以可以隔离混合模式，是因为 isolation: isolate 创建了一个新的层叠上下文