菜单

理解CSS3 isolation: isolate的展现和用意

2018年11月15日 - CSS/CSS3

知道CSS3 isolation: isolate的变现及意图

2016/01/10 · CSS ·
isolate

初稿出处:
张鑫旭   

转自:http://www.zhangxinxu.com/wordpress/?p=5155

一、关于isolation

isolation凡一个CSS3属性,顾名思意是“隔离”,支持之值除了万年无转移的inherit他还包autoisolate.

继承没什么好说的。auto其实就是是不干事的意,是因素的默认值。所以,我们只有待关爱isolation: isolate本条宣称就哼了。

isolation: isolate恰使该语义,就是割裂的意思,那隔离什么呢?本义是用来隔断mix-blend-mode素的混合。

关于mix-blend-mode混模式可以参照我事先的章:“CSS3混合模式mix-blend-mode简介”。

当元素应用了交集模式的时,默认情况下,其见面掺杂z轴上富有层叠顺序比较其没有的层叠元素。

然而,有时候,我们愿意混合模式只至某一个要素,或者只是有平等组元素怎么收拾为?isolation: isolate即为了化解之题目发生的。

而可狠狠地点击这里:isolation:
isolate作用演示demo

如下CSS和HTML结构:

.box { background-color: #0074D9; } .inner { width: 256px; height:
256px; background: url(mm1.jpg) no-repeat; } .mode { position: relative;
right: -100px; mix-blend-mode: darken; }

1
2
3
4
5
6
7
8
9
10
11
12
13
.box {
    background-color: #0074D9;
}
.inner {
    width: 256px;
    height: 256px;
    background: url(mm1.jpg) no-repeat;    
}
.mode {
    position: relative;
    right: -100px;
    mix-blend-mode: darken;
}

<div class=”box”> ><div class=”inner”> ><img
src=”mm2.jpg” class=”mode”> ></div> ></div>

1
2
3
4
5
<div class="box">
    ><div class="inner">
        ><img src="mm2.jpg" class="mode">
    ></div>
></div>

这时,mm2这个一直妹子不仅与mm1左右妹子来了混合,还与蓝色之背景色发生了混合。

图片 1

接下来,我们纪念使促成的力量是,仅仅两布置图发混合,这时候应该怎么处置?

这时候即得行使isolation:isolate展开阻断,形成一个混合组。组外的任何因素不见面发出层叠。

故而,例如,点击demo页面的按钮,给.inner这层div要素增加isolation:isolate
大家照面意识,mm2这个一直妹子没有和蓝色背景色发生混合,如下截图:
图片 2

一旦元素得以创造层叠上下文,就得阻断mix-blend-mode!

其次、isolation:isolate作用的原理

isolation:isolate所以可以阻断混合模式之进展,本质上是以isolation:isolate创造一个新的层叠上下文(stacking
context)。

科学,之所以起作用,就是只是地因缔造了初的层叠上下文。本身并不曾开呀独特之事务。或者我可这样大胆的游说:“isolation:isolate除此之外创建层叠上下文,其他没其他鸟用!”

兴许有人会疑窦,如果照卿的传教,岂不是其余可以创建层叠上下文的性都可阻断mix-blend-mode的生效?

正确,就是这样子的!

倘元素得以创建层叠上下文,就足以阻断mix-blend-mode!

于是,不仅仅是isolation:isolate,下面这些呢是好的:

  1. z-index值不为autoposition:relative/position:absolute恒元素。
  2. position:fixed,仅限Chrome浏览器,其他浏览器遵循上一致长,需要z-index为数值。
  3. z-index值不为autoflex项(父元素display:flex|inline-flex).
  4. 元素的opacity值不是1.
  5. 元素的transform值不是none.
  6. 元素mix-blend-mode值不是normal.
  7. 元素的filter值不是none.
  8. will-change点名的属于性值为点任意一个。
  9. 元素的-webkit-overflow-scrolling设为touch.

眼见为实,您可以狠狠地点击这里:层叠上下文与混合模式阻隔测试demo

挑随机一放缓层叠上下文,大家还好感受及对mix-blend-mode的阻隔,例如:
图片 3

于是乎,不仅仅是isolation:isolate,下面这些为是得的:

三、关于background-blend-mode

混模式领域还有一个要的枪炮就是background-blend-mode,
背景混合模式。那这CSS属性需要isolation:isolate进展围堵吗?答案是匪需要。background-blend-mode天赋是一个封的插花领域,不会见潜移默化其他因素。

以上~

  1. z-index值不为autoposition:relative/position:absolute稳定元素。
  2. position:fixed,仅限Chrome浏览器,其他浏览器遵循上同一修,需要z-index为数值。
  3. z-index值不为autoflex项(父元素display:flex|inline-flex).
  4. 元素的opacity值不是1.
  5. 元素的transform值不是none.
  6. 元素mix-blend-mode值不是normal.
  7. 元素的filter值不是none.
  8. will-change指定的属性值为者任意一个。
  9. 元素的-webkit-overflow-scrolling设为touch.

四、结束语

由此看来,CSS3不但是加了一部分见层的事物,类似层叠上下文这样的概念变得进一步厚重了,其背后的多多混在同步的涉啊于想象的扑朔迷离,但是同时是彼此印证的系。

CSS的念或者相当繁重的。

图片 4

1 赞 1 收藏
评论

图片 5

眼见为实,您可狠狠地点击这里:层叠上下文与混合模式阻隔测试demo

相关文章

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图