学会 mix-blend-mode，你能用几行 CSS 做出文字与图片交融、双色调封面、反色标题、白底图自动"抠图"这几类常见创意效果，而且不用开设计软件导出成品图。
第一步：分清两个属性，别一上来就写错
CSS 里跟混合有关的属性只有两个，作用域完全不同：
mix-blend-mode：控制一个元素和它背后已渲染的内容怎么混（包括父元素背景、兄弟元素、甚至页面背景）。background-blend-mode：控制同一个元素的多重背景图之间怎么混，跟页面其它元素无关。
做个封面标题，用的是前者：
<div class="stage">
<img src="cover.jpg" alt="">
<h1 class="title">MIX</h1>
</div>
.stage { position: relative; isolation: isolate; }
.stage img { display: block; width: 100%; }
.title {
position: absolute;
inset: 0;
display: grid;
place-items: center;
margin: 0;
color: #fff;
font: 900 clamp(48px, 12vw, 160px)/1 system-ui;
mix-blend-mode: overlay;
}
inset: 0 让标题铺满容器，place-items: center 把它居中——这两句比用 top: 50%; transform: translateY(-50%) 稳得多。
注意：.stage 上的 isolation: isolate 不是可选项。没有它，标题会穿过图片继续和 body 背景混合，页面一旦换背景色，效果就全变了。
第二步：常备五种混合模式，覆盖 90% 场景
不用背 16 种模式，先记住这五个：
| 模式 | 效果 | 典型用途 |
|---|
multiply | 正片叠底，白色变透明 | 白底图标/Logo 融进浅色背景 |
screen | 滤色，黑色变透明 | 黑底素材融进深色背景 |
overlay | 叠加，增强对比 | 文字压在照片上、双色调 |
difference | 差值，反色 | 反白标题、鼠标跟随反色 |
luminosity | 取亮度 | 给图片上渐变色的"色罩" |
白底图秒变透明：一张白底的 PNG Logo 放在浅灰卡片上，直接给它 mix-blend-mode: multiply，白底就消失了，比抠图快一万倍。
.logo { mix-blend-mode: multiply; }
反色标题，鼠标划过去像被"擦"出来：
.flip { color: #fff; mix-blend-mode: difference; }
注意：difference 的结果取决于底下那一层的实际颜色，深色底会得到亮色字，浅色底得到暗色字。文字可读性必须实机看，别只信设计稿。
第三步：双色调封面（Duotone）
给照片叠一层渐变，用 mix-blend-mode 混进去：
.duo { position: relative; isolation: isolate; }
.duo img { display: block; width: 100%; filter: grayscale(1) contrast(1.15); }
.duo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(45deg, #ff2d55, #5856d6);
mix-blend-mode: multiply;
}
关键是先把图片去色（grayscale(1)），否则叠加后颜色会脏。想要更亮的氛围，把 multiply 换成 screen 或 overlay 各试一次，选顺眼的那个。
第四步：给背景加质感纹理
多重背景之间的混合，用 background-blend-mode：
.grain {
background-image:
url("noise.png"),
linear-gradient(135deg, #1a1a2e, #16213e);
background-blend-mode: overlay, normal;
background-size: 200px, cover;
}
列表里写几个模式，就对应几张图；写一个模式则所有层都用同一种。顺序是从上到下对应背景图的先后，别搞反。
第五步：控制混合范围与性能
想让某个区域整体不跟外部混，给它加 isolation: isolate；反过来，如果你发现混合"没生效"，先查这条链路上有没有元素偷偷创建了堆叠上下文——transform、opacity 小于 1、filter、will-change、position: fixed 都会。
性能上，mix-blend-mode 会让浏览器多做一次合成。一个页面用三五处没问题，但如果一个滚动长列表里每个卡片都套一层，低端手机上滚动会明显发涩。
兜底写法：
@supports not (mix-blend-mode: overlay) {
.title { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
}
注意：调试时直接在 DevTools 的 Elements 面板改 mix-blend-mode 的值，实时看效果最快；如果结果和预期不符，用 Layers 面板看看到底哪些元素被提升成了合成层。
小结
mix-blend-mode 管元素与背后内容的混合，background-blend-mode 管同一元素的多重背景，两者别混用。- 记住
multiply（白变透）、screen（黑变透）、overlay（增强对比）、difference（反色）、luminosity（上色）五个就够起步。
- 容器加
isolation: isolate，把混合关在一个盒子里，效果才可控。
- 双色调先
grayscale(1) 再叠色，颜色才不会脏。
- 混合层会触发合成，长列表里别大面积使用，并用
@supports 给不支持的浏览器留后路。
见习用户
正式会员
认证极客
钻石卡会员
