DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!
CSS 中的 isolation
属性用于防止元素与其背景混合。
.module {
isolation: isolate;
}
当在另一个元素上声明了 mix-blend-mode
时,它最常被使用。将 isolation
应用于元素可以保护该元素,使其不会继承应用于其后面其他元素的 mix-blend-mode
。
换句话说,如果 mix-blend-mode
告诉重叠元素彼此混合,那么 isolation
会在应用它的元素上创建一个豁免。**这就像一种关闭 mix-blend-mode 的方法,但它来自父元素,而不是需要直接选择具有混合效果的元素。**
值
isolate
:完全按照字面意思。它保护元素免受与背景中其他元素混合的影响。auto
:重置隔离并允许元素与其背景混合。
查看 CSS-Tricks 的 CodePen Isolation Cha-Cha-Cha (@css-tricks)。
一个用例
Maria Antonietta Perna 为 SitePoint 撰写文章 深入了解 CSS mix-blend-mode 属性,创建了一个演示,非常清楚地说明了这一点。我们创建了这张图片来帮助解释她的演示。

查看 SitePoint 的 CodePen 使用 mix-blend-mode 的文本/图像混合 (@SitePoint)。
它不起作用的地方
您可能期望 isolation
在使用 background-blend-mode
时隔离元素,但事实并非如此。背景元素在其本质上已经隔离,因为它们不会与其后面的内容混合。
另一个似乎使 isolation
失效的地方是在与同一元素上的 translate
结合使用时。如果您尝试使用 absolute
定位和 translate
将元素垂直和水平居中,则可能会遇到这种情况。
.module {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
isolation: isolate;
}
translate
的使用似乎在没有使用 isolation
的情况下自行隔离了元素。
相关
更多信息
isolate 的浏览器支持
Chrome | Safari | Firefox | Opera | IE/Edge | Android | iOS |
---|---|---|---|---|---|---|
41 | 7.1 | 36 | 30 | 不支持 | 41 | 8.4 |
Can I Use… mix-blend-mode 的浏览器支持
此浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
41 | 32 | 不支持 | 79 | 技术预览版 |
移动/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 127 | 18.0 |
tyutru
想知道我们如何使用此属性来禁用某些特定子元素的不透明度。例如,将给定的
opacity: 0.1
应用于此标记div > span*2
内的div
,并禁用其中一个span
的透明效果。即使是使用
transform: rotate()
等旋转的父元素,或者更多其他示例。我只是在mix-blend-mode
属性中看到它起作用,而不是任何其他创建另一个堆叠上下文的属性。isolation
属性能够做到这些吗?仅供参考,目前在Chrome中注释掉笔中的隔离规则对我没有任何作用,可能是CodePen的错误。我通过将body的背景图像放在一个新的div中来使其工作,该div包围了其余的HTML。
在Maria的用例示例中,我认为我错过了为什么
<h1>
在隔离后仍然混合,是因为绝对定位吗?