background-blend-mode仅对同一background声明中的多图层生效，需合并为background: #ff6b6b, url("pattern.png");并设background-blend-mode: overlay；注意底色明暗影响效果，避开中性灰与动态颜色，IE及旧版安卓/iOS浏览器不支持。
background-blend-mode不生效？先确认图层结构
它只对同一个background声明里的多个图层起作用，不是给background-image和background-color分别设就能混合。常见错误是写成两行：
background-color: #ff6b6b;
background-image: url("pattern.png");
这样background-blend-mode完全没机会介入——浏览器把颜色当底层、图片当上层，但它们不属于“同一背景叠层”。必须合并进一个background声明：
background: #ff6b6b, url("pattern.png");
background-blend-mode: overlay;
注意逗号分隔顺序：前面的是底层，后面的是上层；overlay对底层颜色敏感，底色越深，叠加后纹理越明显。
overlay模式下颜色发灰或失真？检查色彩空间与亮度
overlay本质是“亮部变亮、暗部变暗”的条件混合，不是简单透明度叠加。如果底色是中性灰（如#808080），叠加后几乎看不出变化；若底色过亮（如#fff），图片细节会被冲淡。
立即学习“前端免费学习笔记（深入）”；
- 推荐底色避开中间值，用偏深（
#333）或偏浅（#f0f0f0）提升对比 - 避免在
background-blend-mode上依赖hsl()或rgba()动态色——部分旧版Safari对非十六进制颜色解析不稳定 - 如果图片本身带alpha通道，
overlay会先按透明度合成再计算明暗，容易导致边缘泛白
兼容性陷阱：哪些浏览器根本不认这个属性？
IE全系不支持；Android WebView 4.4–6.0、iOS Safari
- 上线前务必在真机 iOS 10+/Android 7+ 验证，模拟器常有偏差
- 不要用
@supports (background-blend-mode: overlay)做渐进增强——某些安卓定制ROM的CSS解析器会假阳性返回true - 降级方案别只写
background-color：至少补一张单色PNG作为background-image备用，确保视觉结构一致
想微调混合强度？别碰opacity，改用多重背景+透明度
background-blend-mode本身没有“强度”参数。有人试图给图片加opacity，但这是无效的——opacity作用于整个元素，不是单个背景图层。
真正可控的做法是用多层图片模拟：
background:
linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.3)),
#ff6b6b,
url("pattern.png");
background-blend-mode: overlay, normal;
这里用了三层：linear-gradient作半透遮罩层，overlay只作用于遮罩和底色之间，而图案走normal不参与混合——相当于用遮罩“稀释”了混合效果。
这种写法绕开了overlay的硬边界，但每多一层背景，重绘开销就略增一点；移动端低端机连续滚动时可能掉帧。
最麻烦的其实是设计师给的PSD里用了“颜色叠加”图层样式——那套算法和CSS的overlay不完全等价，导出前得手动校色，不然切图和线上效果总差那么一丁点。
