CSS `Mix-Blend-Mode` 与 `Background-Blend-Mode`：实现图形混合效果 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷们，大家好！欢迎来到今天的“CSS魔法课堂”，我是你们的魔法师，咱们今天要讲的是CSS里两个非常有趣的家伙：mix-blend-mode 和 background-blend-mode。这两个家伙能让你的网页元素“变戏法”，实现各种炫酷的图形混合效果，让你的设计更上一层楼。

一、开胃小菜：mix-blend-mode和background-blend-mode的区别

在正式开始之前，咱们先来简单区分一下这两个“好基友”。简单来说，mix-blend-mode 针对的是整个元素与其下层元素之间的混合，而 background-blend-mode 针对的是元素的背景与其背景之间的混合。

为了方便大家理解，咱们用一个表格来总结一下：

特性	`mix-blend-mode`	`background-blend-mode`
混合对象	整个元素（包括文本、图片等）和其下层元素	元素的背景层之间
应用范围	任何元素	元素的背景（`background-image`，`background-color`等）
常用场景	创建复杂的图像叠加效果，调整元素与背景的融合度	创建独特的背景纹理和颜色组合

二、mix-blend-mode：元素的“变脸术”

mix-blend-mode 允许你控制一个元素与其下层元素如何混合。换句话说，它可以改变元素“看起来”的方式，基于它后面的东西。

1. 基本语法

.element {
  mix-blend-mode: blend-mode-value;
}

blend-mode-value 可以是以下这些值（都是CSS规范里规定好的，不是我瞎编的哦）：

值	描述
`normal`	默认值，不进行混合。
`multiply`	将顶层颜色与底层颜色相乘，结果总是等于或小于底层颜色，产生一种变暗的效果。
`screen`	将顶层颜色与底层颜色反相，相乘后再反相，结果总是等于或大于底层颜色，产生一种变亮的效果。
`overlay`	基于底层颜色的亮暗来选择 `multiply` 或 `screen` 混合模式。如果底层颜色比 50% 亮，则使用 `screen`，否则使用 `multiply`。
`darken`	选择顶层颜色和底层颜色中较暗的那个颜色。
`lighten`	选择顶层颜色和底层颜色中较亮的那个颜色。
`color-dodge`	将底层颜色除以顶层颜色的反相值。这会加亮底层颜色，并根据顶层颜色的值来增加对比度。黑色顶层颜色不会产生任何变化。
`color-burn`	将底层颜色的反相值除以顶层颜色，然后将结果反相。这会加深底层颜色，并根据顶层颜色的值来增加对比度。白色顶层颜色不会产生任何变化。
`hard-light`	类似于 `overlay`，但顶层颜色决定使用 `multiply` 还是 `screen`。
`soft-light`	类似于 `hard-light`，但效果更柔和。
`difference`	计算顶层颜色和底层颜色之间的差异。
`exclusion`	类似于 `difference`，但对比度较低。
`hue`	使用底层颜色的亮度和饱和度，以及顶层颜色的色调。
`saturation`	使用底层颜色的亮度和色调，以及顶层颜色的饱和度。
`color`	使用底层颜色的亮度，以及顶层颜色的色调和饱和度。
`luminosity`	使用底层颜色的色调和饱和度，以及顶层颜色的亮度。

2. 代码示例

咱们来几个简单的例子，让大家感受一下 mix-blend-mode 的威力。

例子1：multiply 变暗效果

<div class="container">
  <div class="background"></div>
  <div class="foreground multiply"></div>
</div>

.container {
  position: relative;
  width: 300px;
  height: 200px;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("your-image.jpg"); /* 替换成你的图片 */
  background-size: cover;
}

.foreground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
}

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

在这个例子中，foreground 元素（半透明红色）与 background 元素（图片）混合，使用了 multiply 模式，产生了颜色变暗的效果。

例子2：screen 变亮效果

<div class="container">
  <div class="background"></div>
  <div class="foreground screen"></div>
</div>

/*  与上例相同，只修改了 `.screen` 类 */
.screen {
  mix-blend-mode: screen;
}

这次我们使用了 screen 模式，产生了颜色变亮的效果。

例子3：overlay 叠加效果

<div class="container">
  <div class="background"></div>
  <div class="foreground overlay"></div>
</div>

/*  与上例相同，只修改了 `.overlay` 类 */
.overlay {
  mix-blend-mode: overlay;
}

overlay 模式会根据底层颜色的亮暗来选择 multiply 或 screen，产生一种叠加的效果。

3. 注意事项

mix-blend-mode 会影响元素的所有内容，包括文本、图片、背景等。
mix-blend-mode 的效果取决于元素的层叠顺序。确保混合的元素位于正确的层叠上下文中。可以使用 z-index 属性来控制元素的层叠顺序。
某些混合模式（例如 difference 和 exclusion）可能会产生意想不到的结果，需要仔细调整颜色值。
mix-blend-mode 在一些老旧浏览器上可能不支持，需要进行兼容性处理。

三、background-blend-mode：背景的“调色盘”

background-blend-mode 允许你控制元素的背景层如何混合。它可以让你创建出各种独特的背景纹理和颜色组合。

1. 基本语法

.element {
  background-image: url("image1.jpg"), url("image2.png");
  background-color: rgba(0, 0, 255, 0.5); /* 半透明蓝色 */
  background-blend-mode: blend-mode-value;
}

blend-mode-value 的取值与 mix-blend-mode 基本相同，包括：

值	描述
`normal`	默认值，不进行混合。
`multiply`	将顶层颜色与底层颜色相乘，结果总是等于或小于底层颜色，产生一种变暗的效果。
`screen`	将顶层颜色与底层颜色反相，相乘后再反相，结果总是等于或大于底层颜色，产生一种变亮的效果。
`overlay`	基于底层颜色的亮暗来选择 `multiply` 或 `screen` 混合模式。如果底层颜色比 50% 亮，则使用 `screen`，否则使用 `multiply`。
`darken`	选择顶层颜色和底层颜色中较暗的那个颜色。
`lighten`	选择顶层颜色和底层颜色中较亮的那个颜色。
`color-dodge`	将底层颜色除以顶层颜色的反相值。这会加亮底层颜色，并根据顶层颜色的值来增加对比度。黑色顶层颜色不会产生任何变化。
`color-burn`	将底层颜色的反相值除以顶层颜色，然后将结果反相。这会加深底层颜色，并根据顶层颜色的值来增加对比度。白色顶层颜色不会产生任何变化。
`hard-light`	类似于 `overlay`，但顶层颜色决定使用 `multiply` 还是 `screen`。
`soft-light`	类似于 `hard-light`，但效果更柔和。
`difference`	计算顶层颜色和底层颜色之间的差异。
`exclusion`	类似于 `difference`，但对比度较低。
`hue`	使用底层颜色的亮度和饱和度，以及顶层颜色的色调。
`saturation`	使用底层颜色的亮度和色调，以及顶层颜色的饱和度。
`color`	使用底层颜色的亮度，以及顶层颜色的色调和饱和度。
`luminosity`	使用底层颜色的色调和饱和度，以及顶层颜色的亮度。

除了这些值之外，background-blend-mode 还有一个特殊的值：

color：将多个背景图像和背景颜色合并为一个颜色。这个值已经废弃，不推荐使用。

2. 代码示例

咱们继续用几个例子来说明 background-blend-mode 的用法。

例子1：混合背景图片和颜色

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

.container {
  width: 300px;
  height: 200px;
  background-image: url("your-image.jpg"); /* 替换成你的图片 */
  background-color: rgba(0, 0, 255, 0.5); /* 半透明蓝色 */
  background-size: cover;
  background-blend-mode: multiply;
}

在这个例子中，背景图片和半透明蓝色背景颜色混合，使用了 multiply 模式，产生了颜色变暗的效果。

例子2：混合多个背景图片

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

.container {
  width: 300px;
  height: 200px;
  background-image: url("image1.jpg"), url("image2.png"); /* 替换成你的图片 */
  background-size: cover;
  background-blend-mode: screen;
}

这里，我们混合了两个背景图片，使用了 screen 模式，产生了颜色变亮的效果。

例子3：混合多种背景效果

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

.container {
  width: 300px;
  height: 200px;
  background-image: url("image1.jpg"), linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); /* 添加线性渐变 */
  background-color: rgba(255, 255, 0, 0.3); /* 半透明黄色 */
  background-size: cover;
  background-blend-mode: overlay;
}

这个例子稍微复杂一些，我们混合了背景图片、线性渐变和半透明背景颜色，使用了 overlay 模式，创造出更丰富的视觉效果。

3. 注意事项

background-blend-mode 只影响元素的背景，不会影响元素的内容（文本、图片等）。
background-blend-mode 的效果取决于背景层的堆叠顺序。按照声明的顺序，后面的背景层会覆盖前面的背景层。
可以结合 background-image、background-color、linear-gradient 等属性，创造出更复杂的背景效果。
与 mix-blend-mode 类似，background-blend-mode 在一些老旧浏览器上可能不支持，需要进行兼容性处理。

四、进阶技巧：组合使用，创造无限可能

mix-blend-mode 和 background-blend-mode 可以单独使用，也可以组合使用，创造出更加复杂和炫酷的效果。

例子：创建双重曝光效果

<div class="container">
  <div class="text">Hello, World!</div>
</div>

.container {
  width: 300px;
  height: 200px;
  background-image: url("image1.jpg"), url("image2.png"); /* 替换成你的图片 */
  background-size: cover;
  background-blend-mode: screen; /* 混合背景图片 */
}

.text {
  font-size: 36px;
  color: white;
  text-align: center;
  line-height: 200px;
  mix-blend-mode: difference; /* 混合文本和背景 */
}

在这个例子中，我们首先使用 background-blend-mode 混合两个背景图片，然后使用 mix-blend-mode 将文本与混合后的背景进行混合，创造出一种双重曝光的效果。

五、兼容性处理

虽然 mix-blend-mode 和 background-blend-mode 已经得到了主流浏览器的支持，但在一些老旧浏览器上可能不支持。为了保证良好的用户体验，我们需要进行兼容性处理。

方法1：使用 @supports 特性查询

@supports (mix-blend-mode: multiply) {
  /*  如果浏览器支持 mix-blend-mode，则应用以下样式 */
  .element {
    mix-blend-mode: multiply;
  }
}

@supports (background-blend-mode: screen) {
  /*  如果浏览器支持 background-blend-mode，则应用以下样式 */
  .element {
    background-blend-mode: screen;
  }
}

方法2：使用 JavaScript 检测

function supportsBlendMode(prop) {
  return window.getComputedStyle(document.body).getPropertyValue(prop) !== undefined;
}

if (supportsBlendMode('mix-blend-mode')) {
  // 浏览器支持 mix-blend-mode
  document.querySelector('.element').style.mixBlendMode = 'multiply';
} else {
  // 浏览器不支持 mix-blend-mode，提供备选方案
  document.querySelector('.element').style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
}

if (supportsBlendMode('background-blend-mode')) {
  // 浏览器支持 background-blend-mode
  document.querySelector('.element').style.backgroundBlendMode = 'screen';
} else {
  // 浏览器不支持 background-blend-mode，提供备选方案
  document.querySelector('.element').style.backgroundColor = 'rgba(0, 0, 255, 0.5)';
}

对于不支持 mix-blend-mode 和 background-blend-mode 的浏览器，我们可以提供一些备选方案，例如使用简单的背景颜色或图片，或者使用 JavaScript 实现类似的效果。

六、总结

今天，我们一起学习了 CSS 中的 mix-blend-mode 和 background-blend-mode 两个强大的属性。它们可以让你轻松地实现各种炫酷的图形混合效果，为你的网页设计增添更多创意和活力。

记住，熟练掌握这些技巧需要大量的实践和尝试。多尝试不同的混合模式、颜色值和图片组合，你就能创造出属于你自己的独特效果。

希望今天的课程对大家有所帮助！咱们下期再见！祝大家编程愉快！

发表回复 取消回复

发表回复取消回复