混合模式

CSS 播客 - 024：混合模式

双色调是一种流行的摄影色彩处理方式，它使图像看起来仅由两种对比鲜明的颜色组成：一种用于高光，另一种用于阴影。但是，如何使用 CSS 实现此效果呢？

通过使用混合模式以及你已了解的其他技术（例如滤镜和伪元素），你可以将此效果应用于任何图像。

什么是混合模式？

混合模式通常在 Photoshop 等设计工具中使用，通过混合来自两个或多个图层的颜色来创建合成效果。通过更改颜色的混合方式，你可以实现非常有趣的视觉效果。你还可以将混合模式用作实用工具，例如隔离具有白色背景的图像，使其看起来具有透明背景。

你可以使用 CSS 中设计工具中可用的大多数混合模式，使用 mix-blend-mode 或 background-blend-mode 属性。mix-blend-mode 将混合应用于整个元素，而 background-blend-mode 将混合应用于元素的背景。

当你元素上有多个背景并且希望它们都相互混合时，可以使用 background-blend-mode。

mix-blend-mode 会影响整个元素，包括其伪元素。一个用例是双色调图像的初始示例，该图像通过其伪元素将颜色图层应用于元素。

混合模式分为两类：可分离和不可分离。可分离混合模式单独考虑每个颜色分量，例如 RGB。不可分离混合模式同等考虑所有颜色分量。

浏览器兼容性

mix-blend-mode

浏览器支持

  • Chrome: 41.
  • Edge: 79.
  • Firefox: 32.
  • Safari: 8.

来源

background-blend-mode

浏览器支持

  • Chrome: 35.
  • Edge: 79.
  • Firefox: 30.
  • Safari: 8.

来源

可分离混合模式

正常

这是默认的混合模式，不会更改元素与其他元素的混合方式。

正片叠底

multiply 混合模式就像将多个透明胶片堆叠在一起。白色像素将显示为透明，黑色像素将显示为黑色。介于两者之间的任何内容都将乘以其亮度（光）值。这意味着浅色变得更浅，深色变得更深，通常会产生更暗的结果。

.my-element {
  mix-blend-mode: multiply;
}

滤色

使用 screen 会乘以光值——与 multiply 的效果相反，并且通常会产生更亮的结果。

.my-element {
  mix-blend-mode: screen;
}

叠加

此混合模式——overlay——结合了 multiply 和 screen。基本深色变得更深，基本浅色变得更浅。中间色（例如 50% 灰色）不受影响。

.my-element {
  mix-blend-mode: overlay;
}

变暗

darken 混合模式比较源图像和背景图像的深色亮度，并选择两者中最暗的。它通过比较每个颜色通道的 rgb 值而不是亮度（如 multiply 和 screen 所做的那样）来实现此目的。使用 darken 和 lighten，通常会从此比较过程中创建新的颜色值。

.my-element {
  mix-blend-mode: darken;
}

变亮

使用 lighten 的效果与 darken 完全相反。

.my-element {
  mix-blend-mode: lighten;
}

颜色减淡

如果使用 color-dodge，它会使背景颜色变亮以反映源颜色。纯黑色不会受到此模式的影响。

.my-element {
  mix-blend-mode: color-dodge;
}

颜色加深

color-burn 混合模式与 multiply 混合模式非常相似，但会增加对比度，从而导致更饱和的中间色调和减少的高光。

.my-element {
  mix-blend-mode: color-burn;
}

强光

使用 hard-light 会产生鲜明的对比。此混合模式要么滤色，要么正片叠底亮度值。如果像素值比 50% 灰色浅，则图像会变亮，就像被滤色一样。如果像素值较深，则会正片叠底。

.my-element {
  mix-blend-mode: hard-light;
}

柔光

soft-light 混合模式是 overlay 的不那么刺眼的变体。它的工作方式非常相似，但对比度较低。

.my-element {
  mix-blend-mode: soft-light;
}

差值

理解 difference 工作原理的一个好方法有点像照片底片的工作原理。difference 混合模式获取每个像素的差值，反转浅色。如果颜色值相同，则它们变为黑色。值中的差异将反转。

.my-element {
  mix-blend-mode: difference;
}

排除

使用 exclusion 与 difference 非常相似，但它不会为相同的像素返回黑色，而是返回 50% 灰色，从而产生对比度较低的更柔和的输出。

.my-element {
  mix-blend-mode: exclusion;
}

不可分离混合模式

你可以将这些混合模式视为 HSL 颜色分量。每个都从活动图层获取特定的分量值，并将其与其他分量值混合。

色相

hue 混合模式采用源颜色的色相，并将其应用于背景颜色的饱和度和亮度。

.my-element {
  mix-blend-mode: hue;
}

饱和度

这与 hue 类似，但使用 saturation 作为混合模式会将源颜色的饱和度应用于背景颜色的色相和亮度。

.my-element {
  mix-blend-mode: saturation;
}

颜色

color 混合模式将从源颜色的色相和饱和度以及背景颜色的亮度创建颜色。

.my-element {
  mix-blend-mode: color;
}

亮度

最后，luminosity 与 color 相反。它创建一个颜色，该颜色具有源颜色的亮度以及背景颜色的色相和饱和度。

.my-element {
  mix-blend-mode: luminosity;
}

isolation 属性

浏览器支持

  • Chrome: 41.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 8.

来源

如果将 isolation 属性设置为值 isolate，它将创建一个新的堆叠上下文，这将阻止它与背景图层混合。正如你在 z-index 模块中所了解到的，当你创建一个新的堆叠上下文时，该图层将成为基础图层。这意味着父级混合模式将不再适用，但设置了 isolation: isolate 的元素内部的元素仍然可以混合。

请注意，这不适用于 background-blend-mode，因为 background 属性已经隔离。

检查你的理解

测试你对混合模式的知识

以下哪些是 CSS 混合模式？

差值
🎉
变亮
🎉
Brighten
再试一次！
Dullen
再试一次！
正片叠底
🎉
叠加
🎉

如果你想以不同的方式混合不同的颜色，你需要哪种混合模式？

可分离
这些混合模式具有针对颜色通道的效果
不可分离
再试一次，不可分离的混合模式不感知颜色通道