background-blend-mode支持normal至luminosity共16种混合模式，最常用且兼容性好的是multiply、screen和overlay；它仅作用于元素多个背景图层间，不作用于背景与内容之间。
background-blend-mode 支持哪些混合模式
它和 Photoshop 的图层混合逻辑一致，但浏览器只实现了部分常用模式。background-blend-mode 接受的值包括 normal、multiply、screen、overlay、darken、lighten、color-dodge、color-burn、hard-light、soft-light、difference、exclusion、hue、saturation、color、luminosity。其中最常用且兼容性较好的是 multiply（变暗叠加）、screen（变亮叠加）和 overlay（增强对比）。
注意：所有模式都作用于元素的多个背景图（含渐变、纯色）之间，**不作用于背景与内容（如文字）之间**——那是 mix-blend-mode 的职责。
必须用多层 background 才能生效
background-blend-mode 不会把单个背景“自己叠自己”，它只在 background 属性声明了多个逗号分隔的背景时才起作用。比如：
div {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4),
radial-gradient(circle, #fff, #eee);
background-blend-mode: multiply;
}
常见错误写法：
- 只写一层背景（哪怕用了
background-image+background-color，也得显式写成两层） - 混用
background和background-image分开定义，导致浏览器只取后者，丢失颜色层 - 用 CSS 变量动态拼接背景值但未正确逗号分隔，实际解析为单层
稳妥做法：始终用完整 background 简写，或至少确保 background-image 和 background-color 同时存在并被识别为独立图层（后者需写成 background: url(...) no-repeat, #fff; 这类形式）。
颜色叠加时透明度不是必须的，但影响结果
很多人以为必须加 rgba() 才能“叠出效果”，其实不然。multiply 对两个不透明纯色也能计算（例如 #ff0000 × #0000ff = 黑），只是结果可能不如预期直观。真正关键的是色彩关系：
-
multiply：任何颜色 × 黑 = 黑；× 白 = 原色；适合做阴影/压暗底图 -
screen：任何颜色 × 白 = 白；× 黑 = 原色；适合提亮或制造光晕 -
overlay：自动判断明暗区域，对暗区用multiply，亮区用screen，适合增强照片质感
如果想控制强度，优先调色（换更浅/更深的基色），而不是盲目加透明度——因为半透色层会先和父容器背景混合，再参与 blend，路径变复杂，容易失控。
兼容性和 fallback 要怎么处理
Chrome 47+、Firefox 30+、Safari 8+ 支持，但 iOS Safari 9.3–12.1 有渲染 bug（尤其 radial-gradient 叠加时错位）。Edge 17+ 完全支持，IE 全系不支持。
安全做法：
- 用
@supports (background-blend-mode: multiply)包裹增强样式 - 基础样式（无 blend）必须可读可用，比如先设一个稳妥的
background-color - 避免依赖 blend 效果传递关键信息（如用 blend 把文字衬得可读，而没 fallback 颜色）
真要兼容老设备，可以用伪元素模拟：主元素设底色，::before 绝对定位盖一层渐变，再用 opacity 控制叠加强度——虽然不是数学等价，但视觉目标常能达成。
最易被忽略的一点：当背景包含图片时，background-blend-mode 会按像素逐点计算，大图 + 复杂模式可能轻微影响滚动性能，尤其低端安卓机。测试时别只看桌面端表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
