background-blend-mode必须写在单个background声明中，因它仅对同一background属性内逗号分隔的多图层生效；分开写background-image和background-color则无法混合。
background-blend-mode 必须写在单个 background 声明里
很多人把 background-image 和 background-color 分开写，再加 background-blend-mode，结果完全没效果。这是因为 background-blend-mode 只对同一 background 属性中声明的多个图层生效，background-color 是独立层级，不参与混合计算。
正确做法是：所有纹理、渐变、颜色模拟层，都塞进一个 background 值里，用逗号分隔，并确保顺序合理（后写的在上层）：
div {
background:
url("noise.png"), /* 纹理图，放最上层 */
linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), /* 半透明遮罩 */
#f5f5f5; /* 底色，必须用渐变模拟而非 background-color */
background-blend-mode: multiply, normal, normal;
background-repeat: repeat, no-repeat, no-repeat;
background-size: 100px 100px, cover, cover;
}- 纹理图推荐 PNG-24 + Alpha，避免 JPG 色彩空间干扰
- 纯色底不能用
background-color，得用linear-gradient(#f5f5f5, #f5f5f5)替代 -
background-blend-mode值的数量必须和图层数一致，顺序一一对应
@mixin 封装多层背景时要显式传入每层尺寸与位置
直接封装一个“带纹理的背景”混合宏，但不控制 background-size 和 background-position，上线后大概率出现纹理拉伸、错位或完全看不见——因为默认 background-size: auto 会把纹理图按原始尺寸铺满，而多数纹理图本意是小尺寸重复。
实操建议用带参数的 @mixin，强制约束关键行为：
立即学习“前端免费学习笔记（深入）”；
@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) - 不设默认值或设成
!default容易掩盖问题，尤其$texture-size这类影响视觉的关键参数 - 避免在 mixin 内部用
@if自动推断尺寸——不同纹理图物理尺寸差异大，人工指定更可靠
mix-blend-mode 和 background-blend-mode 别混着用
想让文字“透出”纹理背景？别在同一个元素上同时设 mix-blend-mode 和 background-blend-mode。前者会让整个元素（含文字、边框、阴影）和背后 DOM 层混合，干扰纹理层本身的 blend 效果；后者只管自己背景里的几张图怎么叠。
典型错误场景：
.card {
background: url("paper.png"), #eee;
background-blend-mode: overlay;
mix-blend-mode: multiply; /* ❌ 这会让 card 文字也去和父容器混合，纹理变味 */
}- 要文字融合背景图 → 用
mix-blend-mode，且确保背景图是该元素的background-image，不要加其他图层 - 要纹理+颜色+渐变多层融合 → 用
background-blend-mode，关掉mix-blend-mode - 真要两者共存（极少见），需用 wrapper 套一层，把
mix-blend-mode放在外层容器，background-blend-mode放在内层块上
SCSS 编译后 CSS 体积容易失控
每次 @include 都会把整个 mixin 的样式复制一遍，三层背景叠在一起的 mixin 被调用 10 次，CSS 就膨胀 10 倍——尤其当每个调用还传了不同 $texture-size 或 $blend-mode 时，浏览器无法合并重复规则。
- 高频复用的固定组合（如统一 16px 噪点 + overlay 模式），改用
%placeholder替代@mixin，它只在被@extend时才生成一次 CSS - 纹理图路径尽量抽成变量，比如
$tex-noise: url("noise.png")，避免在 mixin 参数里反复写字符串 - 开发期用
/* scss-lint:disable */注释临时关闭冗余检查，但上线前必须清理——压缩工具对重复 background 声明优化有限
最隐蔽的坑是：纹理图本身带 alpha 渐变，叠加后边缘发虚，这种问题不会报错，只能靠人眼比对单独打开的纹理图和最终渲染效果。
