混合模式

CSS 播客 - 024：混合模式

Duotone 是摄影中的一种常用的颜色处理方式，使用这种处理方式时，图片看起来就像只由两种对比鲜明的颜色组成：一种用于高光，另一种用于弱光。那么，如何使用 CSS 来达到此目的呢？

借助混合模式以及您学到的其他技术（如滤镜和伪元素），您可以对任何图片应用此效果。

什么是混合模式？

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

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

如果一个元素上有多个背景，并且希望这些背景全部相互融合，则可以使用 background-blend-mode。

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

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

浏览器兼容性

mix-blend-mode

background-blend-mode

可分离的混合模式

常规

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

调节系数

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

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

Screen

使用 screen 会乘以 light 值（与 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 属性

如果您将 isolation 属性设置为 isolate，则该属性会创建一个新的堆叠上下文，从而阻止其与背景幕层混合。正如您在 Z-index 模块中学到的那样，当您创建新的堆叠上下文时，该层将成为基础层。这意味着，父级级别混合模式将不再应用，但设置了 isolation: isolate 的元素内部的元素仍然可以混合。

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

检查您的掌握程度

测试您对混合模式知识的掌握情况