isolation - CSS（层叠样式表）编辑

概述

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

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

初始值	`auto`
适用元素	All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.
是否是继承属性	否
适用媒体	visual
计算值	as specified
Animation type	discrete
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

Formal syntax:  auto | isolate

isolation: auto;
isolation: isolate;

isolation: initial;
isolation: inherit;
isolation: unset;

值

auto: 该关键字定义只有在该元素的属性需要的时候才会创建一个新的元素栈环境。
isolate: 该关键字定义一个新的元素栈环境会被创建。

示例

<div id="b" class="a">
  <div id="d">
    <div class="a c">auto</div>
  </div>
  <div id="e">
    <div class="a c">isolate</div>
  </div>
</div>

.a {
  background-color: rgb(0,255,0);
}
#b {
  width: 200px;
  height: 210px;
}
.c {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 2px;
  mix-blend-mode: difference;
}
#d {
  isolation: auto;
}
#e {
  isolation: isolate;
}

规范

规范	状态	备注
Compositing and Blending Level 1 Isolation	Candidate Recommendation	首次定义

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!