We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

概述

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 typediscrete
正规顺序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!

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] 未实现 ? ?

参见

文档标签和贡献者

此页面的贡献者: mrstork, teoli, Sebastianz, fskuok
最后编辑者: mrstork,