理解CSS3isolation:isolate的表现和作用_html/css_WEB-ITnose

一、关于isolation

isolation 是一个CSS3属性，顾名思意是“隔离”，支持的值除了万年不变的 inherit 外还包括 auto 和 isolate .

继承没什么好说的。 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;	} 

    >
        >     >

      
查看更多关于理解CSS3isolation:isolate的表现和作用_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did113974