css技巧混合模式

看上面这个神奇的效果，文字在黑色背景里面显示为白色，而在白色的背景里面显示为黑色，这就是文字智能适配背景。

看到这样的需求，大多数人第一时间想到的是，文字元素有两个，是完全重叠的两层，一层是黑色，一层是白色，然后通过遮罩实现，这里使用了CSS3 新增了一个属性 -- mix-blend-mode 混合模式来实现。

实现代码


<template><div class="bg"><div class="text">Hello World！</div></div></template><style scoped>.bg{background:url('/uploadUrl/dataroom/2024/07/19/1814116805079793665.png') no-repeat;background-size:100%;display:flex;align-items:center;width:677px;height:106px;justify-content:center;.text{color:#fff;font-size:50px;mix-blend-mode: difference;}}</style>

`mix-blend-mode` 概述

除去 initial 默认、inherit 继承和 unset 还原这 3 个所有 CSS 属性都可以取的值外，还有另外的 16 个具体的取值，对应不同的混合效果。

{mix-blend-mode: normal;         // 正常mix-blend-mode: multiply;       // 正片叠底mix-blend-mode: screen;         // 滤色mix-blend-mode: overlay;        // 叠加mix-blend-mode: darken;         // 变暗mix-blend-mode: lighten;        // 变亮mix-blend-mode: color-dodge;    // 颜色减淡mix-blend-mode: color-burn;     // 颜色加深mix-blend-mode: hard-light;     // 强光mix-blend-mode: soft-light;     // 柔光mix-blend-mode: difference;     // 差值mix-blend-mode: exclusion;      // 排除mix-blend-mode: hue;            // 色相mix-blend-mode: saturation;     // 饱和度mix-blend-mode: color;          // 颜色mix-blend-mode: luminosity;     // 亮度mix-blend-mode: initial;        // 默认mix-blend-mode: inherit;        // 继承mix-blend-mode: unset;          // 还原
}

如果不是专业的 PSer 天天和混合模式打交道，想要记住这么多效果，还是挺困难的。不过有前人帮我们总结了一番，看看如何比较好的理解或者说记忆这些效果