background-blend-mode必须作用于单条background声明中的逗号分隔多层背景，分离写background-color和background-image将导致完全失效；纯色需用linear-gradient模拟，纹理图优先PNG-24并关闭ICC配置文件。
background-blend-mode 不能和 background-color 分开写，否则一定没效果。 它只认单条 background 声明里用逗号分隔的多层背景——颜色必须伪装成渐变，纹理图得带 alpha，且图层数和 background-blend-mode 的值数量要对得上。
为什么写了 background-blend-mode 却看不到纹理
最常见的是把底色和纹理拆成两行：
background-color: #f5f5f5;<br>background-image: url("noise.png");
这样浏览器压根不认为这是“多层背景”，background-blend-mode 直接被忽略。还有一种是用了 JPG 纹理图，CMYK 色彩空间或嵌入 ICC 配置文件会导致混合异常，尤其在 Safari 和旧版 Chrome 中。
- 必须合并为一条
background：比如background: url("noise.png"), linear-gradient(#f5f5f5, #f5f5f5); - 纹理图优先用 PNG-24（带 alpha），导出时关掉“嵌入配置文件”
- 别用 JPG 做纹理底图；非要用，先转 RGB 再另存为无损 PNG 测试
- 临时加一句
background-repeat: repeat, no-repeat;确认两张图都正常显示，再加 blend
如何正确写多层 background 声明
顺序决定叠放关系：靠前的是底层，靠后的是上层。纹理图一般放最前面（即最上层），才能盖在颜色之上；但如果你想要“颜色透出纹理缝隙”，就得把纹理放后面、设透明度低的叠加模式（如 multiply）。
立即学习“前端免费学习笔记（深入）”；
- 三层示例：
background: url("grid.svg"), linear-gradient(45deg, #e0e0e0, #f9f9f9), #fff;→ 注意：最后一个#fff实际会被解析为linear-gradient(#fff, #fff)，但显式写成渐变更稳 -
background-blend-mode值数量可少于图层数（缺省自动补normal），但写了多个就必须一一对应 - 比如三层背景配两个值：
background-blend-mode: multiply, screen;→ 第一&二层用multiply，第二&三层用screen - 所有尺寸、重复、定位都要显式声明：
background-size: 16px 16px, cover, cover;，否则默认auto容易拉伸纹理
选哪个 blend 模式更靠谱
multiply、screen、overlay 是目前兼容性最好、行为最可预测的三个。别迷信“高级感”模式，像 color-dodge 或 luminosity 在部分安卓 WebView 中渲染错乱，低端设备还可能闪烁。
-
multiply：适合深色纹理（如灰噪点）压浅底色（如米白），越黑的地方越暗，白区完全透明 -
screen：适合浅色纹理（如纸张高光）提亮深底色（如藏青），越白的地方越亮，黑区完全透明 -
overlay：自动判断底色明暗来切换逻辑，但对中性灰（如#808080）几乎无效，容易发灰 - 底色避开中间值：用
#333或#f0f0f0比用#808080更容易出效果
SCSS mixin 封装时最容易漏的关键点
直接封装一个 @mixin textured-bg() 很方便，但如果不强制约束 background-size 和 background-position，上线后纹理大概率错位、拉伸或根本看不见——因为默认 auto 会按原始像素铺满整个元素。
- 必须显式传参：
$texture-size: 32px 32px、$texture-pos: 0 0，别设!default - 纹理图路径也建议作为参数，避免硬编码导致复用困难
- 别在 mixin 里用
@if自动推断尺寸——不同纹理图物理尺寸差异大，人工指定更可靠 - 示例调用：
@include textured-bg($texture: url("dots.png"), $texture-size: 8px 8px);
真正难的不是写对语法，而是让设计师给的每一张纹理图，在各种尺寸容器里都保持合理密度和对齐。这需要你提前和他们约定输出规范：PNG-24、RGB、无配置文件、固定物理尺寸（如 64×64）、中心锚点导出。
