MODERN CSS
混合模式mix-blend-mode
让上下图层按数学方式混合，做出自动反色、正片叠底、叠加发光等效果。文字在色块上自动反色就是它的经典用法。
效果预览
BLEND
mix-blend-mode: difference
适合用在哪
文字在任意底色上自动保持可读、图片与背景融合、噪点/纹理叠加、双色调图片。
容易踩的坑
- difference 反色后在中灰背景上得到中灰文字，对比度极低反而不可读。
- 在大面积或滚动元素上使用混合模式，每帧都要重新合成，移动端滚动掉帧。
- 忘记给容器加 isolation:isolate，混合效果穿透到页面背景，颜色意外变化。
设计提示词 · Prompt
混合模式（mix-blend-mode）：常用值 —— difference（反色，白色文字在任意底上自动变成对比色，做「永远可读的标题」神器）；multiply（正片叠底，做暗部叠加与纹理，浅色主题上加噪点用它）；screen（屏幕，做发光与高光）；overlay / soft-light（对比度增强，图片双色调）。注意点：① mix-blend-mode 混合的是「元素与它的背景」，所以要确保元素不在 isolation:isolate 的独立层里；② 父级加 isolation:isolate 可以限制混合范围，防止影响到页面其他部分；③ background-blend-mode 是在单个元素的多个背景图之间混合，用途不同；④ 白字用 difference 时，纯白背景上会变成黑字，这正是想要的效果。
mix-blend-mode: common values — difference (inversion: white text automatically becomes a contrasting color on any background, a great trick for "always readable headings"); multiply (darkens and overlays textures — use it to add grain on light themes); screen (glow and highlights); overlay / soft-light (contrast boost, duotone images). Notes: 1) mix-blend-mode blends "the element with its backdrop", so make sure the element isn't in an isolated isolation:isolate layer; 2) adding isolation:isolate to a parent limits the blending scope so it doesn't affect other parts of the page; 3) background-blend-mode blends multiple background images within a single element, a different use case; 4) with difference, white text on a pure white background turns black — which is exactly the intended effect.
常见搭配
同一页面里经常和「混合模式」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s" style="width:100%">
<div class="mc-blend">
<div class="mc-blend__o"></div>
<div class="mc-blend__o"></div>
<div class="mc-blend__t">BLEND</div>
<span>mix-blend-mode: difference</span>
</div>
</div>