css3结束语,理解CSS3 isolation: isolate的表现和作用
一、关于isolation
isolation是一个CSS3属性,顾名思意是“隔离”,支持的值除了万年不变的inherit外还包括auto和isolate.
继承没什么好说的。auto实际上就是不干事的意思,是元素的默认值。所以,我们只需要关心isolation: isolate这个声明就好了。
isolation: isolate正如其语义,就是隔离的意思,那隔离什么呢?本义是用来隔离mix-blend-mode元素的混合。
关于mix-blend-mode混合模式可以参考我之前的文章:“CSS3混合模式mix-blend-mode简介”。
当元素应用了混合模式的时候,默认情况下,其会混合z轴上所有层叠顺序比其低的层叠元素。
但是,有时候,我们希望混合模式只到某一个元素,或者只是某一组元素怎么办呢?isolation: isolate就是为了解决这个问题产生的。
如下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;
}
此时,mm2这个竖妹子不仅和mm1横妹子发生了混合,还和蓝色的背景色发生了混合。
然后,我们想要实现的效果是,仅仅两张图片发生混合,这时候应该怎么办?
此时就可以使用isolation:isolate进行阻断,形成一个混合组。组以外的其他元素不会发生层叠。
所以,例如,点击demo页面的按钮,给.inner这层div元素增加isolation:isolate, 大家会发现,mm2这个竖妹子没有和蓝色背景色发生混合,如下截图:
二、isolation:isolate作用的原理
isolation:isolate之所以可以阻断混合模式的进行,本质上是因为isolation:isolate创建一个新的层叠上下文(stacking context)。
没错,之所以起作用,就是单纯地因为创建了新的层叠上下文。本身并没有做什么特殊的事情。或者我可以这么大胆的说:“isolation:isolate除了创建层叠上下文,其他没有任何鸟用!”
可能有人会疑问,如果按照你的说法,岂不是任何可以创建层叠上下文的属性都可以阻断mix-blend-mode的生效?
没错,就是这样子的!
只要元素可以创建层叠上下文,就可以阻断mix-blend-mode!
于是,不仅仅是isolation:isolate,下面这些也是可以的:
z-index值不为auto的position:relative/position:absolute定位元素。
position:fixed,仅限Chrome浏览器,其他浏览器遵循上一条,需要z-index为数值。
z-index值不为auto的flex项(父元素display:flex|inline-flex).
元素的opacity值不是1.
元素的transform值不是none.
元素mix-blend-mode值不是normal.
元素的filter值不是none.
will-change指定的属性值为上面任意一个。
元素的-webkit-overflow-scrolling设为touch.
选择任意一款层叠上下文,大家都可以感受到对mix-blend-mode的阻隔,例如:
三、关于background-blend-mode
混合模式领域还有一个重要的家伙就是background-blend-mode, 背景混合模式。那这个CSS属性需要isolation:isolate进行阻隔吗?答案是不需要。background-blend-mode天生是一个封闭的混合领域,不会影响其他元素。
以上~
四、结束语
由此看来,CSS3不仅仅是增加了一些表现层的东西,类似层叠上下文这样的概念变得更加厚重了,其背后的很多交织在一起的关系也比想象的复杂,但是又是互相验证的体系。
CSS的学习还是相当任重道远的。
本文为原创文章,包含脚本行为,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
本文地址:http://www.zhangxinxu.com/wordpress/?p=5155
(本篇完)
css3结束语,理解CSS3 isolation: isolate的表现和作用相关推荐
- 【CSS3】 理解CSS3 transform中的Matrix(矩阵)
理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...
- css3把矩,CSS3 Transform Matrix
css3中的transform让我们操作变形变得很简单,诸如,translate–移动,scale–缩放,rotate–旋转,skew–斜切.这几个属性很方便,也很简单,但是其中matrix我们就不常 ...
- 理解CSS3 transform中的Matrix(矩阵)
一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如"拉普拉斯不等式").这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面& ...
- 半深入理解CSS3 object-position/object-fit属性
半深入理解CSS3 object-position/object-fit属性 转载:https://www.zhangxinxu.com/wordpress/2015/03/css3-object-p ...
- 理解CSS3中的background-size(对响应性图片等比例缩放)
理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...
- css3 混合,瞧瞧CSS3的混合模式
熟悉Photoshop的伙伴肯定知道图层间的混合模式(blend mode),利用混合模式,可以使图片实现不同的效果,当然,这里并不会跟你说Photoshop,而是CSS3的混合模式. 混合模式:指将 ...
- CSS3基础(4)——CSS3 渲染属性
一. CSS3 计数器详解 CSS3计数器(CSS Counters)可以允许我们使用CSS对页面中的任意元素进行计数,实现类似于有序列表的功能. 与有序列表相比,它的突出特性在于可以对任意元素 ...
- 好程序员web前端分享DIV+CSS3和html5+CSS3有什么区别
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享DIV+CSS3和html5+CSS3有什么区别,不管是DIV+CSS3还是html5+CSS3,他们都是我们对 ...
- 【CSS3教程】CSS3基础常用技巧实例集合
为什么80%的码农都做不了架构师?>>> CSS3常用技巧 CSS3下条纹&方格斜纹背景的实现 一.效果抢先:CSS3下的条纹背景demo 这些美丽的纹饰全部都是由CS ...
最新文章
- HashMap 的使用
- 设计一个名为complex的类来表示复数_天线波束设计
- 超融合与传统架构真正的区别在哪?
- Python开发:初识Python
- eclipse/myeclipse选中编辑区域文件,Package Explorer定位文件所在项目及目录
- iOS开发常用输入校验
- transformer机制讲解_【核心代码解读】Transformer-XL
- 新春聊一下:技术架构与架构师角色的诸多思考
- Airflow 中文文档:使用操作器
- FF:纳斯达克要求退市系误读 警示函仅与推迟提交Q3财报相关
- Linux 内核调优
- 微软笔试题 《Image Encryption》
- 高斯滤波程序编写 opencv C++ CSU
- 编程十年 (3):初识计算机
- OMRON PLC使用技巧总结
- win10台式机,耳机插入没有声音
- java 求任意输入半径,圆的周长和面积。
- Window系统多硬盘设置新引导盘
- 一起学些LLVM(五): 学习lli/vmir
- 如何绘制流程图?绘制流程图在线网站分享