background-blend-mode必须写在同一background声明中，且图层数量、顺序须与background-blend-mode值严格对应；background-color需用同色渐变替代，纹理推荐png-24格式。
background-blend-mode必须写在单个background声明里
很多人以为只要写了background-blend-mode，再分别设置background-image和background-color就能生效——结果完全没混合效果。这是因为background-blend-mode只对**同一background属性内逗号分隔的多个图层**起作用；background-color是独立渲染层，不参与混合计算。
正确做法是把所有图层（纹理图、渐变遮罩、底色模拟）全塞进一个background值里，用逗号分隔，并严格匹配background-blend-mode值的数量与顺序：
div {
background: url("noise.png"),
linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)),
linear-gradient(#f8f8f8, #f8f8f8);
background-blend-mode: multiply, normal, normal;
background-repeat: repeat, no-repeat, no-repeat;
background-size: 64px 64px, cover, cover;
}
-
background-color必须用linear-gradient(#f8f8f8, #f8f8f8)替代，否则不参与混合 - 纹理图推荐 PNG-24 + Alpha 通道，避免 JPG 色彩空间干扰导致混合失真
-
background-blend-mode值数量必须等于图层数，顺序一一对应，错一位就全乱
@mixin封装多层背景时必须显式控制size和position
直接写@mixin textured-bg()却不传background-size或background-position，上线后纹理大概率拉伸、错位或根本看不见——因为默认background-size: auto会按原始尺寸铺满整个元素，而多数噪声/纹理图本意是小尺寸重复。
实操建议用带强制参数的混合宏，把关键行为“锁死”：
@mixin textured-bg(
$texture: url("noise.png"),
$base-color: #fff,
$texture-size: 64px 64px,
$texture-pos: 0 0,
$blend-mode: multiply
) {
background: $texture,
linear-gradient($base-color, $base-color);
background-blend-mode: $blend-mode, normal;
background-repeat: repeat, no-repeat;
background-size: $texture-size, cover;
background-position: $texture-pos, center;
}
- 调用时必须显式传参，例如
@include textured-bg($texture-size: 32px 32px) - 不传
$texture-pos会导致纹理始终锚定左上角，在滚动容器中容易错位 - 如果要支持响应式纹理密度，可加
@media嵌套逻辑，但别在 mixin 内部做断点判断——留给调用方更可控
mix-blend-mode和background-blend-mode不能混用替代
有人想用mix-blend-mode给文字叠加“背景染色”效果，却发现它依赖下层内容堆叠顺序，一旦父容器有background-color或中间插入了其他元素，效果就失效。这不是 bug，而是设计使然：mix-blend-mode作用于元素内容与**所有z-index更低的元素**（包括父背景、兄弟元素），而background-blend-mode只管自己内部的背景图层。
- 要做“图片+纯色赋色”，用
background-blend-mode: lighten配合双层background-image（原图+单色渐变） - 要做“文字穿透视频背景”，必须用
mix-blend-mode: difference，且确保视频是z-index更低的兄弟元素，而不是父容器背景 - 伪元素遮罩（如
::before覆盖视频）只能用background-blend-mode混合自身多层背景，无法用mix-blend-mode去混合视频帧——因为伪元素和视频不在同一DOM层级
SCSS变量与函数无法动态生成混合模式值
你不能写$mode: multiply; background-blend-mode: $mode;来动态切换模式——Sass编译期就把变量替换成字符串，但background-blend-mode是CSS运行时解析的，不支持CSS自定义属性注入。真正需要动态切换时，得靠JS操作style.backgroundBlendMode或预设多套class。
- SCSS里可用
@if分支生成不同混合模式的class，比如.bg-multiply、.bg-overlay，但无法在运行时响应数据变化 - 若搭配CSS自定义属性（
--blend-mode: multiply），需配合background-blend-mode: var(--blend-mode)，但注意IE和旧版 Safari 不支持 - 最稳妥的做法：把常用组合封装成独立 class，例如
.bg-texture-lighten，避免在组件级过度抽象
background-blend-mode的渲染延迟比桌面端明显，建议加will-change: background微调性能，但别滥用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
