外还满含

知道CSS3 isolation: isolate的变现和作用

2016/01/10 · CSS ·
isolate

初藳出处:
张鑫旭   

一、关于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

二、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

三、关于background-blend-mode

混合方式领域还恐怕有一个首要的家伙就是background-blend-mode,
背景混合格局。那那几个CSS属性供给isolation:isolate进行围堵吗?答案是无需。background-blend-mode自然是八个密闭的搅动领域,不会影响其余因素。

以上~

四、结束语

看来,CSS3不然而充实了部分表现层的东西,相近层叠上下文那样的定义变得更其厚重了,其幕后的累累掺杂在联合签名的涉嫌也比想象的树大根深,不过又是相互印证的系统。

CSS的就学可能特别困苦的。

图片 4

1 赞 1 收藏
评论

图片 5

相关文章