mix-blend-mode 实现文字适配背景
刀刀
1/3/2025
0 字
0 分钟
前置知识
根据 MDN相关文档 的描述，该属性是用于定义了一个元素的颜色如何与其父元素的颜色以及兄弟元素的颜色混合。它允许您创建令人惊艳的视觉效果，可以用于创建半透明效果、添加阴影、制作图片蒙版和很多其他效果。
具体来说，mix-blend-mode 定义了两个元素之间的颜色混合模式。该属性接受许多不同的值，接下来逐个介绍。
| 属性 | 效果 |
|---|---|
normal | 默认值。使用正常的颜色混合模式 |
multiply | 将两个颜色的值相乘，得到一个更暗的颜色。这通常用于创建阴影效果 |
screen | 将两个颜色的值相加，然后减去相乘的值，得到一个更亮的颜色。这通常用于创建高光效果 |
overlay | 根据背景颜色的亮度来选择颜色混合模式。如果背景颜色较暗，则使用 multiply 模式；如果背景颜色较亮，则使用 screen 模式 |
darken | 将两个颜色的值比较，使用较暗的那个颜色 |
lighten | 将两个颜色的值比较，使用较亮的那个颜色 |
color-dodge | 将前景色分解为 RGB 分量，并将每个分量分别除以（1 减去背景色的对应分量）。然后将每个分量限制在 0 到 1 之间，并使用限制后的前景色作为混合色 |
color-burn | 将前景色分解为 RGB 分量，并将每个分量分别除以背景色的对应分量。然后将每个分量限制在 0 到 1 之间，并使用限制后的前景色作为混合色 |
difference | 将前景色减去背景色的值，并取绝对值。这会导致一个反相的效果 |
exclusion | 将前景色和背景色的值相加，然后减去相乘的值的两倍。这通常用于创建反相效果 |
hue | 将前景色的色相（Hue）与背景色的饱和度（Saturation）和亮度（Lightness）混合。这可以用于在不改变亮度和饱和度的情况下改变颜色 |
saturation | 将前景色的饱和度与背景色的色相和亮度混合。这可以用于在不改变颜色的情况下改变饱和度 |
color | 将前景色的色相、饱和度和亮度与背景色混合。这可以用于在改变所有颜色属性的情况下改变前景色的颜色。 |
luminosity | 将前景色的亮度与背景色的色相和饱和度混合。这可以用于在不改变颜色的情况下改变亮度。 |
mix-blend-mode | 属性可以应用于任何具有背景颜色或背景图像的元素，包括文本、图像和 SVG 图形。通常情况下，您会将 mix-blend-mode 应用于子元素，使其与父元素或其他兄弟元素混合。 |
本案例取的是 difference 属性也就是差值，计算方式如下：
- 如果背景颜色是白色（即255，255，255），字体颜色为白色，两者相减得出 0，0，0 也就是黑色
- 如果背景色为黑色，字体颜色为白色，两者相减为 255 - 0 = 255 依旧是白色
🔔 提示
在混合模式中，元素的颜色值可以是任何一种表示颜色的方式，包括十六进制值、RGB 值、RGBA 值等。当进行混合计算时，CSS 会将两个元素的颜色值转换成标准的 RGBA 表示方式，并根据混合模式算法对这两个颜色值进行计算，最终生成一个新的 RGBA 颜色值。
混合模式中的算法涉及到了数学计算，不同的算法使用不同的计算公式。以 multiply 算法为例，它的计算公式是将两个颜色值的每个通道（即红、绿、蓝、透明度四个通道）分别相乘，得到新的颜色值的每个通道。
实现
html
<style>
.banner {
width: 500px;
height: 250px;
text-align: center;
line-height: 250px;
background-image: linear-gradient(
45deg,
#fff 0%,
#fff 50%,
#000 50%,
#000 100%
);
}
.title {
color: #fff;
mix-blend-mode: difference;
}
</style>
<div class="banner">
<div class="title">前端搬砖人 每天都努力</div>
</div>