CSS mix-blend-mode 混合模式
CSS混合模式：mix-blend-mode元素混合（multiply/screen/overlay/darken/lighten等16种）、background-blend-mode背景混合、isolation隔离混合、创意视觉效果 · 难度：入门 · +10XP
CSS mix-blend-mode —— 像Photoshop一样混合图层
如果你用过Photoshop的图层混合模式（正片叠底、滤色、叠加……），CSS的mix-blend-mode就是网页版的图层混合。
mix-blend-mode —— 元素与背景混合
.overlay-text {
color: white;
mix-blend-mode: difference; /* 文字颜色与背景取反 */
}这样白色文字在白背景上自动变黑，在黑背景上保持白色——永远可读！
常用混合模式
| 模式 | 效果 | 类比 |
|---|---|---|
| multiply | 正片叠底，暗部叠加 | 两张幻灯片叠一起 |
| screen | 滤色，亮部叠加 | 两台投影仪打同一位置 |
| overlay | 叠加，亮部更亮暗部更暗 | 增强对比度 |
| difference | 差值，颜色取反 | 文字自动反色 |
背景混合：background-blend-mode
.hero {
background-image: url('texture.png'), linear-gradient(blue, red);
background-blend-mode: overlay;
}动手练习
- 基础练习：做一个文字在图片上的效果——用difference让文字在亮暗背景上都可读。
- 进阶应用：做一张海报——背景图片上加渐变层，用multiply混合出电影海报质感。
- 项目实战：给网站Banner用background-blend-mode叠加纹理和渐变。