一、关于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; }
<div class="box"> ><div class="inner"> ><img class="mode lazy" src="/static/imghwm/default1.png" data-src="mm2.jpg" alt="理解CSS3 isolation: isolate的表现和作用_html/css_WEB-ITnose" > ></div>></div>
此时,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 .
眼见为实,您可以狠狠地点击这里: 层叠上下文与混合模式阻隔测试demo
选择任意一款层叠上下文,大家都可以感受到对 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混合模式mix-blend-mode/background-blend-mode简介 (1.000)

HTML、CSS和JavaScript在Web开发中的作用分别是:1.HTML定义网页结构,2.CSS控制网页样式,3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML、CSS和JavaScript在网页开发中的角色分别是:HTML负责内容结构,CSS负责样式,JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容,确保语义化。2.CSS通过选择器和属性控制网页样式,使其美观易读。3.JavaScript通过脚本控制网页行为,实现动态和交互功能。

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增强WebevebDevelopment。

HTML是构建网页结构的基石。1.HTML定义内容结构和语义,使用、、等标签。2.提供语义化标记,如、、等,提升SEO效果。3.通过标签实现用户交互,需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号,需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

HTML是一种用于构建网页的语言,通过标签和属性定义网页结构和内容。1)HTML通过标签组织文档结构,如、。2)浏览器解析HTML构建DOM并渲染网页。3)HTML5的新特性如、、增强了多媒体功能。4)常见错误包括标签未闭合和属性值未加引号。5)优化建议包括使用语义化标签和减少文件大小。

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容,使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

禅工作室 13.0.1
功能强大的PHP集成开发环境

WebStorm Mac版
好用的JavaScript开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

Dreamweaver Mac版
视觉化网页开发工具