CSS背景混合：`background-blend-mode`在多重背景图中的像素合成逻辑 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

好的，没问题。

CSS背景混合模式详解：`background-blend-mode`的像素合成逻辑

大家好，今天我们深入探讨CSS中一个强大且灵活的属性：background-blend-mode。它允许我们控制多个背景图层如何相互混合，从而创造出令人惊艳的视觉效果。理解其背后的像素合成逻辑至关重要，这样才能有效地利用它。

1. background-blend-mode 概述

background-blend-mode属性定义了元素的背景图层（包括背景颜色和背景图像）如何与元素的背景颜色和/或背景图像下方的内容（通常是元素的父元素的背景）混合。简单来说，它决定了当前背景层如何与它下面的层进行颜色混合。

语法:

background-blend-mode: <blend-mode>[, <blend-mode>]* | normal

其中 <blend-mode> 可以是以下值之一：

normal：默认值，不进行混合。顶层背景覆盖下层背景。
multiply：正片叠底。源颜色和目标颜色的值相乘，然后除以 255。结果通常是更暗的颜色。
screen：滤色。源颜色和目标颜色的值取反，相乘，然后除以 255，再取反。结果通常是更亮的颜色。
overlay：叠加。如果目标颜色比 50% 亮，则相当于 screen，否则相当于 multiply。
darken：变暗。选择源颜色和目标颜色中较暗的颜色。
lighten：变亮。选择源颜色和目标颜色中较亮的颜色。
color-dodge：颜色减淡。将目标颜色除以源颜色的反相。结果通常是更亮的颜色。
color-burn：颜色加深。将目标颜色的反相除以源颜色，然后将结果反相。结果通常是更暗的颜色。
hard-light：强光。如果源颜色比 50% 亮，则相当于 screen，否则相当于 multiply，但源颜色和目标颜色互换。
soft-light：柔光。类似于 overlay，但效果更柔和。
difference：差值。计算源颜色和目标颜色之间的绝对差值。
exclusion：排除。类似于 difference，但对比度较低。
hue：色相。使用源颜色的色相，目标颜色的饱和度和亮度。
saturation：饱和度。使用源颜色的饱和度，目标颜色的色相和亮度。
color：颜色。使用源颜色的色相和饱和度，目标颜色的亮度。
luminosity：亮度。使用源颜色的亮度，目标颜色的色相和饱和度。

当提供多个 <blend-mode> 值时，它们将依次应用于每个背景图层。例如，如果定义了三个背景图层和两个混合模式，则第一个混合模式将应用于第一个和第二个背景图层的混合，第二个混合模式将应用于第二个和第三个背景图层的混合。如果混合模式的数量少于背景图层的数量，则最后一个混合模式将应用于剩余的图层。

2. 像素合成逻辑

background-blend-mode 的核心在于它如何处理每个像素的颜色值。理解 RGB 颜色模型是理解混合模式的基础。每个像素的颜色由红 (R)、绿 (G) 和蓝 (B) 三个分量组成，每个分量的值范围是 0 到 255。此外，还有一个 alpha 分量 (A)，表示像素的透明度，范围也是 0 到 255 (0 表示完全透明，255 表示完全不透明)。

混合模式的计算通常是针对每个颜色分量独立进行的。这意味着红色分量按照混合模式的公式计算，绿色和蓝色分量也按照相同的公式计算。

我们将用以下符号来表示：

Cs：源颜色 (Source Color) 的颜色分量 (R, G, B)。
Cb：目标颜色 (Background Color) 的颜色分量 (R, G, B)。
Cr：结果颜色 (Result Color) 的颜色分量 (R, G, B)。
As：源颜色的 Alpha 值。
Ab：目标颜色的 Alpha 值。
Ar：结果颜色的 Alpha 值。

接下来，我们将详细解释几个常用的混合模式的计算公式：

2.1 normal

normal 模式是最简单的，它只是简单地用源颜色覆盖目标颜色。

Cr = Cs
Ar = As (如果需要考虑透明度，则需要更复杂的计算，见下文)

如果需要考虑透明度，结果颜色的计算涉及 alpha 合成：

Cr = Cs * As + Cb * Ab * (1 - As)
Ar = As + Ab * (1 - As)

2.2 multiply

multiply 模式将源颜色和目标颜色的颜色分量相乘，然后除以 255。

Cr = (Cs * Cb) / 255

这个模式会使颜色变暗，因为任何颜色乘以小于 1 的值都会使其变小。如果其中一个颜色是黑色 (0)，则结果也是黑色。如果其中一个颜色是白色 (255)，则结果是另一个颜色不变。

代码示例:

<!DOCTYPE html>
<html>
<head>
<style>
.blend-container {
  width: 200px;
  height: 200px;
  background-image: url('red.png'), url('blue.png'); /* 假设red.png是纯红色，blue.png是纯蓝色 */
  background-size: cover;
  background-blend-mode: multiply;
}
</style>
</head>
<body>

<div class="blend-container"></div>

</body>
</html>

在这个例子中，红色和蓝色混合的结果是紫色 (近似)。红色 (255, 0, 0) 和蓝色 (0, 0, 255) 的 multiply 结果如下:

红色分量: (255 * 0) / 255 = 0
绿色分量: (0 * 0) / 255 = 0
蓝色分量: (0 * 255) / 255 = 0

实际上，因为图片是有层次的，红色在上，蓝色在下，所以需要将红色的颜色乘以蓝色的颜色，结果为(0,0,0),然后再将蓝色的颜色乘以红色的颜色，结果也为(0,0,0),然后将两个颜色叠加，最终结果接近黑色。更精确的紫色需要考虑Alpha值和图片的具体颜色分布。

2.3 screen

screen 模式首先将源颜色和目标颜色的颜色分量取反 (255 – color)，然后相乘，再除以 255，最后再取反。

Cr = 255 - ((255 - Cs) * (255 - Cb) / 255)

这个模式会使颜色变亮。如果其中一个颜色是白色 (255)，则结果也是白色。如果其中一个颜色是黑色 (0)，则结果是另一个颜色不变。

代码示例:

<!DOCTYPE html>
<html>
<head>
<style>
.blend-container {
  width: 200px;
  height: 200px;
  background-image: url('red.png'), url('blue.png'); /* 假设red.png是纯红色，blue.png是纯蓝色 */
  background-size: cover;
  background-blend-mode: screen;
}
</style>
</head>
<body>

<div class="blend-container"></div>

</body>
</html>

红色 (255, 0, 0) 和蓝色 (0, 0, 255) 的 screen 结果如下:

红色分量: 255 – ((255 – 255) * (255 – 0) / 255) = 255
绿色分量: 255 – ((255 – 0) * (255 – 0) / 255) = 0
蓝色分量: 255 – ((255 – 0) * (255 – 255) / 255) = 255

结果是品红色 (255, 0, 255)。

2.4 overlay

overlay 模式根据目标颜色的亮度来决定使用 multiply 或 screen 模式。

如果 Cb <= 127.5 (目标颜色比 50% 亮度暗): Cr = (Cs * Cb) / 127.5 （相当于multiply，但除以127.5而不是255，所以结果更亮）
如果 Cb > 127.5 (目标颜色比 50% 亮度亮): Cr = 255 - ((255 - Cs) * (255 - Cb) / 127.5)（相当于screen，但除以127.5而不是255，所以结果更暗）

overlay 模式通常用于在不改变整体亮度的情况下，增强图像的对比度。

2.5 darken

darken 模式简单地选择源颜色和目标颜色中较暗的颜色分量。

Cr = min(Cs, Cb)

2.6 lighten

lighten 模式简单地选择源颜色和目标颜色中较亮的颜色分量。

Cr = max(Cs, Cb)

2.7 color-dodge

color-dodge模式通过将目标颜色除以源颜色的反相来加亮目标颜色。

Cr = Cb == 255 ? 255 : min(255, (Cb * 255) / (255 - Cs))

如果源颜色接近白色，结果会变得非常亮，可能会导致颜色溢出（变成白色）。

2.8 color-burn

color-burn模式通过将目标颜色的反相除以源颜色，然后将结果反相来加深目标颜色。

Cr = Cs == 0 ? 0 : 255 - min(255, ((255 - Cb) * 255) / Cs)

如果源颜色接近黑色，结果会变得非常暗，可能会导致颜色溢出（变成黑色）。

2.9 hard-light

hard-light 模式类似于 overlay，但是源颜色和目标颜色的角色互换。

如果 Cs <= 127.5 (源颜色比 50% 亮度暗): Cr = (Cb * Cs) / 127.5
如果 Cs > 127.5 (源颜色比 50% 亮度亮): Cr = 255 - ((255 - Cb) * (255 - Cs) / 127.5)

2.10 soft-light

soft-light 是一个比较复杂的模式，它的计算公式如下：

如果 Cs <= 127.5: Cr = Cb - (2 * Cs - 255) * Cb * (255 - Cb) / (255 * 255)
如果 Cs > 127.5: Cr = Cb + (2 * (Cs - 127.5) / 255) * (D(Cb) - Cb)

其中 D(Cb) 的计算如下：

如果 Cb <= 127.5: D(Cb) = ((255 * Cb * Cb) / (2 * 255))
如果 Cb > 127.5: D(Cb) = 255 - (255 * (255 - Cb) * (255 - Cb)) / (2 * 255)

soft-light 模式通常用于添加柔和的光照效果。

2.11 difference

difference 模式计算源颜色和目标颜色之间的绝对差值。

Cr = abs(Cs - Cb)

这个模式会产生非常鲜艳的颜色，并且通常用于创建特殊效果。

2.12 exclusion

exclusion 模式类似于 difference，但是对比度较低。

Cr = Cs + Cb - (2 * Cs * Cb) / 255

2.13 hue

hue 模式使用源颜色的色相，目标颜色的饱和度和亮度。这个模式涉及到颜色空间的转换，从 RGB 转换为 HSL (色相、饱和度、亮度)，然后再转换回 RGB。

2.14 saturation

saturation 模式使用源颜色的饱和度，目标颜色的色相和亮度。同样涉及到 RGB 和 HSL 之间的转换。

2.15 color

color 模式使用源颜色的色相和饱和度，目标颜色的亮度。同样涉及到 RGB 和 HSL 之间的转换。

2.16 luminosity

luminosity 模式使用源颜色的亮度，目标颜色的色相和饱和度。同样涉及到 RGB 和 HSL 之间的转换。

3. 实际应用示例

让我们通过一些实际的例子来演示如何使用 background-blend-mode 创建不同的视觉效果。

3.1 创建双色调效果

<!DOCTYPE html>
<html>
<head>
<style>
.duotone {
  width: 300px;
  height: 200px;
  background-image: url('image.jpg'), linear-gradient(to right, #0000ff, #ff0000);
  background-size: cover;
  background-blend-mode: luminosity;
}
</style>
</head>
<body>

<div class="duotone"></div>

</body>
</html>

在这个例子中，我们将一张图片与一个线性渐变混合，使用 luminosity 模式。这会将图片的亮度信息与渐变的颜色结合起来，从而创建一个双色调效果。

3.2 增强图像对比度

<!DOCTYPE html>
<html>
<head>
<style>
.contrast {
  width: 300px;
  height: 200px;
  background-image: url('image.jpg'), url('noise.png'); /* 假设 noise.png 是一张噪点图片 */
  background-size: cover;
  background-blend-mode: overlay;
}
</style>
</head>
<body>

<div class="contrast"></div>

</body>
</html>

通过将图像与一张噪点图片混合，使用 overlay 模式，可以增强图像的对比度，使图像看起来更清晰。

4. mix-blend-mode 和 background-blend-mode 的区别

mix-blend-mode 和 background-blend-mode 经常被混淆，但它们的作用对象不同。

background-blend-mode：影响元素的背景图层之间的混合，以及背景图层与元素下方的背景的混合。它只影响元素的背景。
mix-blend-mode：影响整个元素与它下面的内容的混合。它影响元素的所有内容，包括文本、图像和背景。

代码示例：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 300px;
  height: 200px;
  background-color: #ddd;
  position: relative;
}

.element {
  width: 150px;
  height: 100px;
  background-image: url('red.png'), url('blue.png');
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.background-blend {
  background-blend-mode: multiply;
}

.mix-blend {
  mix-blend-mode: multiply;
}
</style>
</head>
<body>

<div class="container">
  <div class="element background-blend">Background Blend</div>
</div>

<div class="container">
  <div class="element mix-blend">Mix Blend</div>
</div>

</body>
</html>

在这个例子中，第一个容器中的元素的 background-blend-mode 只影响其背景图层之间的混合。第二个容器中的元素的 mix-blend-mode 影响整个元素与其父元素 (.container) 的背景的混合。观察文本 "Mix Blend" 也会受到混合模式的影响。

5. 性能考虑

background-blend-mode 和 mix-blend-mode 可能会对性能产生影响，特别是当应用于大型图像或复杂布局时。这是因为浏览器需要对每个像素进行计算，这可能会消耗大量的 CPU 资源。

为了优化性能，可以考虑以下几点：

尽量减少使用混合模式的元素数量。
使用较小的图像作为背景。
避免在滚动或动画中使用混合模式。
使用硬件加速。某些浏览器可能默认禁用硬件加速，可以使用 transform: translateZ(0); 或 will-change: transform; 来强制启用硬件加速。

6. 浏览器兼容性

background-blend-mode 和 mix-blend-mode 的浏览器兼容性相对较好。大多数现代浏览器都支持这些属性。但是，一些旧版本的浏览器可能不支持。可以使用 Can I Use 等网站来查看具体的浏览器兼容性信息。

7. 使用场景和技巧

图片着色: 使用颜色叠加和混合模式（如multiply或screen）可以给黑白图片着色。
创建纹理: 将纯色背景与纹理图片混合，可以快速创建各种纹理效果。
模拟光照效果: 使用overlay或soft-light等模式可以模拟光照和阴影，增加图像的立体感。
信息图表可视化: 使用不同的混合模式可以突出显示数据，使图表更具吸引力。
艺术效果: 结合多种混合模式和背景图片，可以创造出独特的艺术效果，例如水彩画、油画等。

代码示例：

<!DOCTYPE html>
<html>
<head>
<style>
.colored-image {
  width: 300px;
  height: 200px;
  background-image: url('grayscale-image.jpg'), linear-gradient(to right, #87CEEB, #FFA07A); /* grayscale-image.jpg是灰度图 */
  background-size: cover;
  background-blend-mode: multiply;
}
</style>
</head>
<body>

<div class="colored-image"></div>

</body>
</html>

这个例子展示了如何使用 multiply 混合模式和渐变来给灰度图片着色，创建一种复古风格的照片效果。

背景混合模式提供了一种强大的方式来操作 CSS 中的颜色和图像。通过理解不同的混合模式的像素合成逻辑，我们可以创建出令人惊叹的视觉效果，增强用户体验，并提升网站的整体美感。

记住关键混合模式的用途

multiply模式加深颜色，screen模式加亮颜色，overlay模式根据目标颜色亮度选择性地加深或加亮，而difference模式则可以创造出奇异的色彩反转效果。

理解混合模式背后的数学原理

每个混合模式都有其独特的像素合成公式，掌握这些公式可以帮助我们更好地控制混合效果，并创造出我们想要的结果。

灵活运用混合模式创造丰富视觉

background-blend-mode可以用于创建各种视觉效果，从简单的双色调效果到复杂的纹理和光照效果。掌握这个属性可以极大地丰富我们的网页设计。

更多IT精英技术系列讲座，到智猿学院

CSS背景混合模式详解：background-blend-mode的像素合成逻辑

发表回复 取消回复

CSS背景混合模式详解：`background-blend-mode`的像素合成逻辑

发表回复取消回复