background-blend-mode 必须设置至少两个背景层才生效，单层背景无混合对象；其值定义多背景间混合方式，非单图滤镜；需用逗号分隔多个背景，顺序即图层上下关系。
必须同时设置至少两个背景层（比如一张图 + 一个纯色），否则 background-blend-mode 完全不生效。
为什么 background-blend-mode 没反应？
最常见的原因是只写了 background-image，没配第二个背景源。这个属性不是“给图片加滤镜”，而是定义「多个背景之间怎么混合」——单层背景等于没有混合对象。
- 必须用逗号分隔写多个背景：例如
url("a.jpg"), linear-gradient(black, rgba(0,0,0,0)) - 书写顺序即图层顺序：
background-image在前 = 上层；background-color或渐变在后 = 下层 - 如果只设了
background: url("x.jpg")，哪怕加了background-blend-mode: multiply，浏览器也直接忽略
background-blend-mode 常用值的实际效果差异
不同模式对文字可读性、明暗对比影响很大，不能凭名字猜。比如 color-dodge 不是“让颜色变淡”，而是大幅提亮高光区，容易导致局部过曝。
-
multiply：压暗，适合深色文字+浅图场景，但可能让图中暗部细节丢失 -
screen：提亮，适合浅色文字+深图，但会让灰度图发白 -
overlay：保留高光/阴影，增强对比，多数 banner 卡片首选 -
lighten：逐像素取两层中更亮的值，适合做“去阴影”或透出底色 -
luminosity：仅混合亮度，保留上层色相，适合调色不改构图
兼容性和降级必须手动处理
background-blend-mode 在 Safari 7.1+、Chrome 35+、Firefox 30+ 支持，但 IE 完全不支持，旧版 Safari 还有混合顺序 bug。不能依赖浏览器自动 fallback。
立即学习“前端免费学习笔记（深入）”；
- 务必提供
background-color作为基础背景，它会参与混合，也是降级时的最终显示色 - 避免用
background: url(...) no-repeat简写覆盖掉background-color—— 要显式写出所有背景项 - 如需强兼容，用
@supports (background-blend-mode: overlay)包裹增强样式，否则老浏览器直接跳过整条规则
别和 mix-blend-mode 混用，尤其别套在定位元素里
mix-blend-mode 作用于元素与下方内容的混合，而 background-blend-mode 只管自己身上的多个背景。两者混用极易触发意外层叠上下文，导致部分背景消失或混合错位。
- 设置了
position: relative+z-index的容器，再加mix-blend-mode，常使background-blend-mode失效 - 动画中频繁切换
background-blend-mode值可能引发重绘抖动，建议只用于静态装饰区域 - 真正要模糊背景，得用
backdrop-filter: blur()，background-blend-mode根本不碰模糊计算
最容易被忽略的一点：混合效果高度依赖原始图片的明暗分布和色相。同一组参数换张图，可能从“高级感”变成“脏灰感”。上线前务必在真实图素材上验证，而不是只看 demo 里的 placeholder。
