background-blend-mode: multiply 未生效是因为至少需要两个可混合的背景图层，单图加单色背景在旧浏览器中不被视为两层，需用逗号分隔的 background-image 或 base64 渐变图确保兼容性。
background-blend-mode: multiply 为什么没生效？
直接加 background-blend-mode: multiply 却看不到颜色变深、图片发暗，大概率是背景层没凑齐——这个属性要求至少两个**可混合的背景图层**同时存在，单张图片 + 单色背景不算“两层”，除非你显式声明了两个 background-image 或一个 background-image 加一个 background-color（但注意：background-color 只在 CSS Level 4 中才被正式视为可参与 blend 的图层，旧版浏览器会忽略它）。
常见错误现象：background: #ff6b6b url(logo.png); background-blend-mode: multiply; 在 Chrome 110+ 可行，但在 Safari 16.4 之前或 Firefox 109 之前会完全不生效，因为它们把 background-color 当作底层“画布”，而非参与混合的图层。
- 必须写成两个独立图层：用逗号分隔的
background-image，比如url(pattern.png), linear-gradient(#ff6b6b, #4ecdc4) - 或者用
background-image+background-color，但只在较新浏览器中可靠（Chrome ≥110，Safari ≥16.4，Firefox ≥112） - 别用
background简写覆盖掉隐式的图层数量——它可能把 color 合并进 image，导致只剩一层
如何让纯色和图片真正“相乘”而不是叠在一起？
相乘（multiply）的本质是每个通道做 color1 × color2 / 255，所以深色会让图片变暗，浅色影响小，白色几乎无变化。想看到明显效果，得让底色不是纯白或纯透明——透明色（transparent）在 blend 中等价于黑（0,0,0），会把图变黑，不是你想要的“叠加色”。
使用场景：给一张灰调产品图快速加上品牌主色滤镜；为 icon SVG 背景统一染色；在不改原图的前提下做轻量视觉主题切换。
- 安全写法：用
background-image: url(icon.png), linear-gradient(to right, #ff6b6b, #4ecdc4);，再配background-blend-mode: multiply - 避免用
background-color: #ff6b6b单独搭配图片——兼容性差，且在部分浏览器里会被降级为 normal 模式 - 如果必须用色值，建议转成 1×1 的 base64 渐变图：
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3Crect width='1' height='1' fill='%23ff6b6b'/%3E%3C/svg%3E")，这样 100% 是图层，兼容所有支持 blend 的浏览器
background-blend-mode 兼容性和 fallback 怎么处理？
它不是渐进增强型属性——不支持时整个 blend 效果静默失效，页面不会报错，但用户看到的是原始图层叠加（normal 模式）。不能指望它“降级成半透明”之类。
性能影响很小，GPU 通常直接加速；但每多一层 background-image 就多一次纹理上传，超大图慎叠三层以上。
- 查兼容性看
caniuse.com/background-blend-mode，重点盯 Safari 和旧 Android Webview - fallback 方案只能靠 JS 检测：
if ('backgroundBlendMode' in document.body.style) { /* 支持 */ } else { /* 切成预合成图 or filter: brightness() 近似模拟 */ } - 别用
@supports (background-blend-mode: multiply)做 CSS fallback——它在 Safari 15.4–16.3 会误报支持，实际不工作
和 mix-blend-mode、filter: blend-mode 有什么区别？
background-blend-mode 只管元素自己的多个背景层之间怎么混；mix-blend-mode 是让整个元素和它**背后的内容**（父容器、其他兄弟元素）混合，容易引发意外透出；而 filter: blend-mode() 目前根本不存在——CSS Filter 没有这个函数，别被搜索误导。
容易踩的坑：有人把 mix-blend-mode: multiply 加在带背景图的 div 上，结果发现文字也变暗了，甚至底下导航栏颜色错乱——因为它是穿透混合，不是局部控制。
- 要控制背景内部混合 → 用
background-blend-mode - 要让整个卡片和背后图片融合（比如毛玻璃效果）→ 用
mix-blend-mode，但务必限制父容器isolation: isolate防止污染 - 别在
background-blend-mode生效的地方再叠mix-blend-mode，行为不可预测，尤其在 Safari 中
CSS 的 blend 模式看着简单，但图层来源、浏览器实现节奏、fallback 边界都卡得很细。最常被忽略的是：你以为写了 color + image 就是两层，其实浏览器版本说了算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
