isolation

概述

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

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

初始值	`auto`
适用元素	All elements. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.
是否是继承属性	否
计算值	as specified
Animation type	discrete

语法

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! (en-US)

Desktop
Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	41.0	36 (36)	未实现	?	?

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	41.0	36.0 (36)[1]	未实现	?	?

isolation

概述

语法

值

示例

规范

浏览器兼容性

参见