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 typeNot animatable

语法

Formal syntax:  
isolation = 
  <isolation-mode>  

<isolation-mode> = 
  auto     |
  isolate  



isolation: auto;
isolation: isolate;

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

值

auto

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

isolate

该关键字定义一个新的元素栈环境会被创建。

示例

html
<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>
css
.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
Compositing and Blending Level 2
# isolation

浏览器兼容性

BCD tables only load in the browser

参见