CSS mix-blend-mode 实现元素融合效果

一、什么是 mix-blend-mode？

mix-blend-mode 是 CSS Compositing and Blending Module 的核心属性之一，它定义了一个元素的内容如何与其背后的背景（包括父元素内容和下层元素）进行颜色混合。其工作原理类似于图像处理软件（如 Photoshop）中的图层混合模式，通过数学算法将当前元素的像素颜色与下方背景颜色的对应像素进行计算，生成新的视觉效果。

二、属性值详解

mix-blend-mode 支持多种混合模式，可分为以下几类：

类别	属性值	效果描述
基础模式	`normal`	默认值，不混合，元素颜色覆盖下方内容。
	`multiply`	正片叠底：颜色相乘，结果更暗（白色不变，黑色变黑）。
	`screen`	滤色：颜色反相后相乘再反相，结果更亮（黑色不变，白色变白）。
	`overlay`	叠加：结合 `multiply` 和 `screen`，增强对比度。
明暗调节模式	`darken`	取较暗的颜色作为结果。
	`lighten`	取较亮的颜色作为结果。
	`color-dodge`	颜色减淡：降低对比度使背景变亮。
	`color-burn`	颜色加深：提高对比度使背景变暗。
高级特效模式	`difference`	差值：黑白叠加会反转颜色。
	`exclusion`	排除：类似差值但对比度更低，效果更柔和。
	`hard-light`	强光：源色决定叠加方式（亮则屏幕，暗则正片叠底）。
	`soft-light`	柔光：类似强光但效果更柔和。
HSL色彩模式	`hue`	保留源颜色的色相，背景的饱和度和亮度。
	`saturation`	保留源颜色的饱和度，背景的色相和亮度。
	`color`	保留源颜色的色相和饱和度，背景的亮度。
	`luminosity`	保留源颜色的亮度，背景的色相和饱和度。

三、兼容性

现代浏览器均支持此属性，无需前缀，但旧版 IE 不支持

四、实战示例：根据不同背景颜色，显示不一样的文字颜色

如果文字颜色设置成白色，当遇到白色背景时就看不到文字了，这该怎办？莫慌，今天的主角mix-blend-mode: difference;就要闪亮登场了。

html 复制代码

<div class="container">
  <div class="overlay background1">
    <div className="difference">difference</div>
  </div>
  <div class="overlay background2">
    <div className="difference">difference</div>
  </div>
  <div class="overlay background3">
    <div className="difference">difference</div>
  </div>
  <div class="overlay background4">
    <div className="difference">difference</div>
  </div>
  <div class="overlay background5">
    <div className="difference">difference</div>
  </div>
  <div class="overlay background6">
    <div className="difference">difference</div>
  </div>
  <div class="overlay background7">
    <div className="difference">difference</div>
  </div>
  <div class="overlay background8">
    <div className="difference">difference</div>
  </div>
</div>

css 复制代码

.container{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  width: 100px;
  height: 50px;
  color: #fff;
}
.difference {
  mix-blend-mode: difference;
}
.background1 {
  background: white;
}
.background2 {
  background: red;
}
.background3 {
  background: blue;
}
.background4 {
  background: #000;
}
.background5 {
  background: #5c0011;
}
.background6 {
  background: #5b8c00;
}
.background7 {
  background: #9e1068;
}
.background8 {
  background: #13c2c2;
}

效果如下图：

difference是差值计算，举个例子，默认字体白色，如果背景是黑色，差之后就是(255-0, 255-0, 255-0)，最后的结果是255，255，255（白色），如果背景是白色，差之后就是(255-255, 255-255, 255-255)，最后的结果是0，0，0（黑色）。