isolation

CSS isolation 属性的作用是用于隔离一组元素，使这组元素不和它们的背景进行混合。

当使用 isolation 属性隔离了一个元素之后，会创建一个新的堆叠上下文。在这个堆叠上下文中的元素不会和元素的背景进行混合。

isolation 属性可以和 mix-blend-mode 属性或属性结合使用。

例如下面的一个例子，在一个容器中有一张图片和一些文字。

<div class="container">
    <img src="1.jpg" alt="...">
    <div class="text-wrapper">
        <h1>童年时光</h1>
    </div>
</div>                              
                            

此时文字在图片上面，图片是文字的背景（backdrop）。通过 mix-blend-mode 可以将文字和图片进行混合，得到如下图的效果：

我们可以使用 isolation 属性将文字和它的包裹元素隔离起来，使它们不和背景图片进行混合。

.text-wrapper {
    isolation: isolate;
}                              
                            

得到的效果如下图所示：

isolation: auto | isolate 
                            

参数：

isolation: auto;
isolation: isolate;

isolation: initial;