常见错误是未设置 background-blend-mode 且纹理图层顺序/尺寸不匹配，导致仅显示底图；应将纹理放后、用 PNG 透明图、设 background-size 并选合适混合模式。
background-image 叠加纹理时为什么看不到效果
常见错误是直接用两个 background-image 写在一起，比如 background-image: url(img.jpg), url(texture.png);，但没设 background-blend-mode 或纹理图层尺寸/位置不匹配，结果只显示底图——浏览器默认用“覆盖”方式叠图，上层纯色或透明度低的纹理会被完全压住。
必须显式开启混合：纹理图层需在后（CSS 从后往前绘制），且至少一层带透明通道（PNG 推荐）；background-size 建议设为 100% 100% 或具体像素值，避免纹理被拉伸变形。
-
background-blend-mode: multiply最常用，适合暗色纹理叠加在照片上 - 若纹理是浅灰噪点图，改用
overlay或soft-light更自然 - 别依赖
background-repeat: repeat默认行为——很多纹理图本身已含无缝拼接逻辑，重复反而露马脚
mix-blend-mode 和 background-blend-mode 到底该用哪个
mix-blend-mode 作用于元素自身及其子内容与**背后页面内容**的混合，容易误伤文字、按钮等子元素；而 background-blend-mode 严格限定在**同一元素的多个背景图之间**混合，安全可控，就是干这事的。
举个典型翻车场景：给 <div> 加了 mix-blend-mode: multiply，结果里面放的白色文字变透明看不见了——因为文字和背后的 body 背景混了。这时候换 background-blend-mode 就没事。
立即学习“前端免费学习笔记（深入）”；
- 只叠背景图 → 无条件选
background-blend-mode - 要让整个卡片“融入”下方区域（比如毛玻璃效果）→ 才考虑
mix-blend-mode，但得额外包一层容器隔离子元素 - IE 完全不支持这两个属性，需要降级方案（如预合成纹理图）
纹理 PNG 文件本身要注意什么
不是所有 PNG 都能当纹理用。常见坑是导出时勾了“保留编辑信息”或用了 16bit 通道，导致文件大、加载慢，甚至某些浏览器解析失败；更隐蔽的是纹理图里藏了 Alpha 通道渐变，结果叠加后边缘发虚或出现意外晕染。
实操建议：用 Sketch/Figma 导出时选“PNG-24 + 透明度”，Photoshop 存储为 Web 所用格式（Legacy）并关掉“转换为 sRGB”；用 pngcheck -v texture.png 看是否真为 8bit + Alpha。
- 纹理图尺寸建议 ≤ 256×256，太大无意义还拖慢渲染
- 避免使用带内阴影、高斯模糊的纹理图——CSS 混合无法还原原始光照逻辑
- 测试时把纹理图单独打开，用吸管取色：中性灰应为
#808080，否则multiply下会偏色
移动端 Safari 对 background-blend-mode 的兼容细节
iOS 13.4+ 支持 background-blend-mode，但有个硬限制：如果任意一个背景图是 linear-gradient()，Safari 会直接忽略整个混合模式，退回到最上面那层图显示——连 fallback 都不给你留。
所以别写 background-image: url(photo.jpg), linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)); background-blend-mode: overlay; 这种组合。要么全用图片，要么把渐变转成 1×1 PNG 贴图。
- 真要用渐变叠加？改用
mask-image+ 单层背景图模拟，更稳 - 用
@supports (background-blend-mode: multiply)包裹样式，避免老版本白屏 - 微信内置浏览器（X5 内核）至今不支持，上线前务必真机测
