首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

隔离 | isolation

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

代码语言:javascript
复制
/* 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该关键字定义一个新的元素栈环境会被创建。

正式语法

代码语言:javascript
复制
auto | isolate

示例

代码语言:javascript
复制
<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>
代码语言:javascript
复制
.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

扫码关注腾讯云开发者

领取腾讯云代金券