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 属性已被隔离。
检查您的掌握程度
测试您对混合模式知识的掌握情况
以下哪些是 CSS 混合模式?
如果要以不同方式混合不同的颜色,您需要哪种风格的混合模式?