isolation

Avatar of Geoff Graham
Geoff Graham

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,其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
4132不支持79技术预览版

移动/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
12712712718.0