background-blend-mode 失效主因是图片格式与颜色模式不匹配；应优先使用RGB无配置文件的PNG纹理图，明确区分background-blend-mode（多背景层间混合）与mix-blend-mode（元素与背后内容混合）。
background-blend-mode 混合失效？检查图片格式和颜色模式
直接用 background-blend-mode: multiply 却看不到纹理效果，大概率是图片本身问题。该属性对 PNG（带 alpha）和 SVG 效果最稳定；JPG 在部分浏览器中可能因色彩空间（如 CMYK）或嵌入 ICC 配置文件导致混合异常。纯色背景（如 #f0f0f0）和纹理图叠加时，若纹理图是灰度但保存为“索引色”或含透明通道错位，也会让混合结果发灰、变暗甚至完全不可见。
- 优先用 PNG 格式纹理图，确保导出为 RGB + 无嵌入配置文件（Photoshop 中选“不要嵌入配置文件”）
- 避免用 JPG 做纹理底图；若必须用，先转成 RGB 模式并另存为无损 PNG
- 测试时临时把纹理图设为
background-image: url("texture.png"), linear-gradient(#fff, #fff)，确认两张图都能正常显示再加 blend
mix-blend-mode 和 background-blend-mode 别混用
mix-blend-mode 作用于元素自身与**背后堆叠内容**（比如父容器、其他 DOM 元素），而 background-blend-mode 只影响**同一个元素的多个 background 图层之间**的混合。想让文字穿透纹理背景显出质感？那是 mix-blend-mode 的事；想让一张噪点图和一层纯色融合出旧纸感？必须用 background-blend-mode。
- 要混合多张背景图（如纹理图 + 渐变 + 颜色），只写在
background或background-image+background-color组合里，再配background-blend-mode - 如果同时写了
mix-blend-mode和background-blend-mode，前者可能导致整个元素透明度参与混合，干扰预期纹理浓度 - 注意层级：CSS 自定义属性（
--tex）不能直接用于background-blend-mode值，它只接受关键字如multiply、overlay、screen
常见 blend 模式效果差异与适用场景
multiply 最常用，适合深色纹理压浅色底；screen 反之，适合浅纹盖深底；overlay 对比更强，但容易过曝——尤其当纹理图本身有高光区域时。别盲目套“高级感”推荐，得看你的纹理图明暗分布。
-
multiply：纹理图越黑，覆盖处越暗；白区完全透明 → 适合炭笔/牛皮纸类暗纹 -
screen：纹理图越白，覆盖处越亮；黑区完全透明 → 适合胶片颗粒、纸张高光纹 -
overlay：保留纹理对比，但会强化两端极值 → 容易让噪点图显得刺眼，慎用于高清纹理 - 性能上，
multiply和screen在所有现代浏览器中渲染开销接近，overlay略高，低端移动设备可能偶现闪烁
兼容性兜底：没有 background-blend-mode 怎么办
Safari 9–13.1、IE 全系、老 Android 浏览器不支持 background-blend-mode。不能只靠 @supports 包一层就完事——因为降级后若只留一张纹理图，往往太抢眼，而只留纯色又丢失全部质感。
立即学习“前端免费学习笔记（深入）”；
- 用
@supports (background-blend-mode: multiply)包裹完整背景声明，里面写混合逻辑 - 外面先声明基础 fallback：
background: #f8f6f2（柔和底色），再叠加一层半透纹理图：background-image: url("noise-10pct.png")，opacity 控制在 0.05–0.15 之间 - 避免用
background-size: cover配合小纹理图，否则 fallback 下会拉伸失真；统一用background-size: 100px 100px这类固定值更可控
multiply 下几乎看不出效果；而同样尺寸但灰度 80 的图，一加就脏。调图时别只看缩略图，用取色器测几个点的 RGB 均值，比凭感觉靠谱。 
