CSS isolations（隔离）：建立新的层叠上下文以控制混合模式的边界 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

CSS Isolations：掌控混合模式的边界

大家好，今天我们来深入探讨一个略显高级但非常实用的CSS特性：isolation。这个属性主要用于建立新的层叠上下文，控制混合模式、filter以及mask等效果的应用范围，从而实现更精细的视觉控制。很多时候，你可能遇到混合模式或者滤镜效果“溢出”到不期望的区域，isolation就是解决这类问题的关键。

什么是层叠上下文？

理解isolation之前，我们需要回顾一下层叠上下文（Stacking Context）。简而言之，层叠上下文是HTML元素的一个三维概念，它决定了元素在屏幕上的绘制顺序，也就是哪个元素在前，哪个元素在后。每个层叠上下文都有一个“根元素”，这个根元素会创建一个新的层叠顺序。

以下因素会创建新的层叠上下文：

根元素 (HTML)
position: absolute 或 position: relative 且 z-index 值不为 auto 的元素
position: fixed 或 position: sticky 的元素
opacity 小于 1 的元素
transform 值不为 none 的元素
filter 值不为 none 的元素
perspective 值不为 none 的元素
clip-path 值不为 none 的元素
mask 相关属性 (例如 mask-image, mask-mode, mask-composite, mask-border)
mix-blend-mode 值不为 normal 的元素
isolation: isolate 的元素
will-change 指定了会创建层叠上下文的属性 (例如 transform, opacity)
contain: layout, contain: paint 或 contain: strict 的元素

掌握层叠上下文对于理解isolation至关重要，因为它影响了isolation创建的边界。

`isolation` 属性的作用

isolation属性有两个值：

auto (默认值): 元素不创建新的层叠上下文，它属于其父元素的层叠上下文。
isolate: 元素创建一个新的层叠上下文。

关键在于 isolate 值。当一个元素设置了 isolation: isolate，它就成为了一个新的层叠上下文的根元素。这意味着：

混合模式的边界: mix-blend-mode 应用在这个元素及其子元素上，不会影响到这个层叠上下文之外的元素。
滤镜和遮罩的边界: filter 和 mask 等视觉效果的应用范围被限制在这个层叠上下文中，不会“溢出”。
z-index 的影响范围: 子元素的 z-index 值只相对于这个新的层叠上下文生效，不会影响到外部的元素。

混合模式与 `isolation`

mix-blend-mode 属性定义了元素的内容应该如何与它的父元素的内容混合。如果没有 isolation，混合效果可能会超出预期的范围，影响到页面上其他的元素。

示例：没有 isolation 的混合模式

<div class="container">
  <div class="background"></div>
  <div class="foreground">
    <h1>混合模式示例</h1>
    <p>这段文字会与背景混合。</p>
  </div>
</div>

.container {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: #ccc;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('image1.jpg'); /* 替换成你的图片 */
  background-size: cover;
}

.foreground {
  position: relative; /* 关键：设置为relative，否则会超出容器 */
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  background-color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
}

h1, p {
  color: white;
}

在这个例子中，.foreground 的 mix-blend-mode: multiply 会导致它的背景色（半透明红色）与 .background 的图像混合。如果 image1.jpg 背景复杂，那么混合后的效果可能会超出 .container 的范围，影响到.container 之外的元素（如果存在）。

示例：使用 isolation 控制混合模式

<div class="container">
  <div class="background"></div>
  <div class="foreground">
    <h1>混合模式示例</h1>
    <p>这段文字会与背景混合。</p>
  </div>
</div>

.container {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: #ccc;
  isolation: isolate; /* 创建新的层叠上下文 */
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('image1.jpg'); /* 替换成你的图片 */
  background-size: cover;
}

.foreground {
  position: relative; /* 关键：设置为relative，否则会超出容器 */
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  background-color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
}

h1, p {
  color: white;
}

在这个改进后的例子中，我们在 .container 上添加了 isolation: isolate。这会创建一个新的层叠上下文，.foreground 的混合模式效果会被限制在这个容器内，不会影响到外部的元素。

表格对比：isolation 的影响

特性	没有 `isolation`	有 `isolation: isolate`
混合模式边界	可能超出元素的边界，影响外部元素	限制在元素内部，不会影响外部元素
滤镜和遮罩边界	可能超出元素的边界，影响外部元素	限制在元素内部，不会影响外部元素
`z-index` 影响	子元素的 `z-index` 可能受到外部层叠上下文的影响	子元素的 `z-index` 只相对于新的层叠上下文生效

滤镜和遮罩与 `isolation`

类似于混合模式，filter 和 mask 等效果也可能“溢出”到不期望的区域。 isolation 同样可以用来控制这些效果的边界。

示例：没有 isolation 的滤镜效果

<div class="container">
  <div class="blurred">模糊的内容</div>
  <p>未模糊的内容</p>
</div>

.container {
  width: 300px;
  height: 200px;
  background-color: #eee;
  position: relative;
  overflow: hidden; /* 为了防止模糊超出容器 */
}

.blurred {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: blur(10px);
}

p {
  position: relative;
  z-index: 1; /* 尝试将其置于模糊层之上 */
}

在这个例子中，.blurred 元素应用了 blur 滤镜。即使我们试图使用 z-index 将 <p> 元素置于模糊层之上，由于 .blurred 元素本身创建了层叠上下文（因为设置了filter）， <p> 元素仍然会被模糊效果影响，因为它们属于同一个层叠上下文。如果不设置overflow: hidden;，模糊效果会超出.container，影响其他元素。

示例：使用 isolation 控制滤镜效果

<div class="container">
  <div class="blurred">模糊的内容</div>
  <p>未模糊的内容</p>
</div>

.container {
  width: 300px;
  height: 200px;
  background-color: #eee;
  position: relative;
  isolation: isolate; /* 创建新的层叠上下文 */
  overflow: hidden; /* 为了防止模糊超出容器 */
}

.blurred {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: blur(10px);
}

p {
  position: relative;
  z-index: 1; /* 现在可以正常显示在模糊层之上 */
}

通过在 .container 上添加 isolation: isolate，我们创建了一个新的层叠上下文。现在，.blurred 元素的模糊效果被限制在这个容器内，并且 <p> 元素的 z-index 可以正常工作，将其置于模糊层之上。

`z-index` 与 `isolation`

z-index 属性用于控制元素的堆叠顺序。但是，z-index 的作用范围仅限于它所在的层叠上下文。isolation 通过创建新的层叠上下文，可以有效地控制 z-index 的影响范围。

示例：z-index 在没有 isolation 的情况下

<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
</div>

<div class="overlay">Overlay</div>

.container {
  position: relative;
  width: 200px;
  height: 150px;
  background-color: #ddd;
}

.box {
  position: absolute;
  width: 80px;
  height: 60px;
  text-align: center;
  line-height: 60px;
}

.box1 {
  background-color: lightblue;
  top: 20px;
  left: 20px;
  z-index: 1;
}

.box2 {
  background-color: lightgreen;
  top: 50px;
  left: 50px;
  z-index: 2;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  text-align: center;
  line-height: 100vh;
  z-index: 3;
}

在这个例子中，.overlay 的 z-index 为 3，.box2 的 z-index 为 2。由于 .overlay 是 position: fixed 的元素，它创建了一个新的层叠上下文。因此，.overlay 会覆盖 .container 中的所有元素，包括 .box2。

示例：使用 isolation 控制 z-index

<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
</div>

<div class="overlay">Overlay</div>

.container {
  position: relative;
  width: 200px;
  height: 150px;
  background-color: #ddd;
  isolation: isolate; /* 创建新的层叠上下文 */
}

.box {
  position: absolute;
  width: 80px;
  height: 60px;
  text-align: center;
  line-height: 60px;
}

.box1 {
  background-color: lightblue;
  top: 20px;
  left: 20px;
  z-index: 1;
}

.box2 {
  background-color: lightgreen;
  top: 50px;
  left: 50px;
  z-index: 2;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  text-align: center;
  line-height: 100vh;
  z-index: 3;
}

在这个改进后的例子中，我们在 .container 上添加了 isolation: isolate。现在，.container 创建了一个新的层叠上下文，.box1 和 .box2 的 z-index 只相对于这个新的层叠上下文生效。.overlay 仍然会覆盖整个屏幕，但是 .box1 和 .box2 之间的堆叠顺序由它们在 .container 内部的 z-index 决定。

实际应用场景

isolation 在以下场景中非常有用：

复杂的UI组件: 当创建具有复杂混合模式、滤镜和遮罩效果的UI组件时，可以使用 isolation 来确保这些效果不会影响到页面上的其他元素。
模态框 (Modal): 可以使用 isolation 来创建一个独立的层叠上下文，确保模态框的 z-index 不会受到页面上其他元素的影响。
图像编辑: 在图像编辑应用中，可以使用 isolation 来控制滤镜和遮罩效果的应用范围，实现更精确的编辑。
游戏开发: 在Web游戏开发中，可以使用 isolation 来创建独立的层叠上下文，控制游戏元素的堆叠顺序和视觉效果。

性能考虑

虽然 isolation 非常有用，但也需要注意其性能影响。创建新的层叠上下文会增加浏览器的渲染负担，特别是当页面上存在大量的 isolation: isolate 元素时。因此，应该谨慎使用 isolation，只在必要时才使用。

总结

isolation 属性为我们提供了一种强大的方式来控制混合模式、滤镜和遮罩等效果的边界，并影响 z-index 的作用范围。通过创建新的层叠上下文，可以实现更精细的视觉控制，避免效果“溢出”到不期望的区域，从而构建更稳定、更可预测的UI。掌握 isolation 对于高级 CSS 开发者来说至关重要。

使用isolation可以有效地控制混合模式，滤镜，遮罩的范围，并且能够影响z-index的作用范围。

更多IT精英技术系列讲座，到智猿学院

CSS Isolations：掌控混合模式的边界

什么是层叠上下文？

isolation 属性的作用

混合模式与 isolation

滤镜和遮罩与 isolation

z-index 与 isolation