CSS isolation 属性

CSS isolation 属性定义该元素是否必须创建一个新的层叠上下文（stacking context (en-US)）。

该属性的主要作用是当和 background-blend-mode 属性一起使用时，可以只混合一个指定元素栈的背景：它允许使一组元素从它们后面的背景中独立出来，只混合这组元素的背景。

实例

为 id="e" 的元素创建新的堆叠上下文：

<!DOCTYPE html>
<html>
<head>
<style>
.a {
  background-color: lightgreen;
}
#b {
  width: 250px;
  height: 250px;
}
.c {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 2px;
  mix-blend-mode: difference;
}
#d {
  isolation: auto;
}
#e {
  isolation: isolate;
}
</style>
</head>
<body>
<h1>isolation 属性</h1>
<div id="b" class="a">
  <div id="d">
  <div class="a c">div d: isolation: auto;</div>
  </div>
  <div id="e">
  <div class="a c">div e: isolation: isolate;</div>
  </div>
</div>
<p><b>注释：</b>版本 79 之前的 Edge 不支持 isolation 属性。</p>
</body>
</html>

运行一下

定义和用法

isolation 属性定义元素是否必须创建新的堆叠内容。

提示：与 background-blend-mode 或 mix-blend-mode 一起使用时，isolation 属性很有用。

默认值：	auto
继承：	否
动画制作：	不支持。请参阅：动画相关属性。
版本：	CSS3
JavaScript 语法：	object.style.isolation="isolate"

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

属性
isolation	41.0	79.0	36.0	Yes	30.0

CSS 语法

isolation: auto|isolate|initial|inherit;

属性值

值	描述
auto	默认。只在应用于元素的属性之一需要它时，才创建新的堆叠上下文。
isolate	必须创建新的堆叠上下文。
initial	将此属性设置为其默认值。参阅 initial。
inherit	从其父元素继承此属性。参阅 inherit。

CSS isolation 属性

实例

定义和用法

浏览器支持

CSS 语法

属性值

分类导航