isolation

概述

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

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

语法

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

规范

浏览器兼容性

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!

参见

• <blend-mode>
• mix-blend-mode, background-blend-mode