隔离 | isolation

isolation

isolationCSS属性定义该元素是否必须创建一个新的stacking context。

/* Keyword values */
isolation: auto;
isolation: isolate;

/* Global values */
isolation: inherit;
isolation: initial;
isolation: unset;

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

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

语法

下面列出的关键字值之一。

值

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

正式语法

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;
}

规范

Specification	Status	Comment
Compositing and Blending Level 1The definition of 'Isolation' in that specification.	Candidate Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	41.0	36 (36)	No support	30	7.1

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	41.0	36.0 (36)	No support	36	8.0