background-blend-mode无法实现遮罩层只盖背景不盖文字，因其仅混合背景图层颜色，不控制层叠顺序；正确方案是用position:relative+::before伪元素+z-index分层，使遮罩与文字成为独立可控图层。
遮罩层只盖背景不盖文字，background-blend-mode 本身做不到
直接说结论：background-blend-mode 是用来混合多个 background-image 或背景色与图像之间颜色的，它不控制层叠顺序，也不隔离文字渲染。你加一层半透明遮罩想“只压背景、不压文字”，靠这个属性根本没法实现——文字始终在背景之上绘制，而 background-blend-mode 根本不参与文字图层的合成。
真正有效的做法：用伪元素 + z-index 分层
核心思路是把“遮罩”从背景里剥离出来，变成独立的、可定位的图层，再精确控制它和文字的堆叠关系：
- 给容器设
position: relative，为伪元素提供定位上下文 - 用
::before伪元素画遮罩（比如background: rgba(0,0,0,0.4)），并设z-index: 1 - 确保文字内容不在伪元素内部，且自身
z-index高于遮罩（如文字是子元素，设z-index: 2；或默认文档流中文字天然在伪元素上方，只要伪元素没设position: absolute就不行——所以必须设） - 伪元素需覆盖整个容器：
content: ""+position: absolute+inset: 0
示例结构：
.card {
position: relative;
background: url("photo.jpg") center/cover;
}
.card::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.4);
z-index: 1;
}
.card > p {
position: relative;
z-index: 2; /* 确保文字在遮罩之上 */
color: white;
}
为什么不用 background-blend-mode 混合遮罩？
常见误解是用它叠加一层纯色背景来“柔化”原图，比如：
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("photo.jpg");
background-blend-mode: multiply;
这确实会让背景变暗，但问题在于：
- 文字依然会受到整体背景变暗影响（尤其浅色字在变暗区域上可读性下降）
- 无法单独提升文字层级——它只是在背景层内部做颜色运算
- 不支持对文字做反向提亮或描边等增强操作
- 部分旧浏览器（如 Safari 9–13）对
background-blend-mode支持不稳定，容易回退成纯色覆盖
进阶需求：需要渐变遮罩+文字自适应亮度？
如果遮罩不是均匀色，而是顶部透明、底部加深的渐变，同时希望标题文字在暗区自动变白、亮区变黑，就得放弃纯 CSS 背景方案，改用：
- 伪元素分层 +
mix-blend-mode: difference（慎用，性能开销大，且依赖父背景非纯白/纯黑） - 更稳妥的是 JS 检测局部亮度（取背景图某区域平均亮度），动态加 class 控制文字色
- 或直接用
mask-image/clip-path做视觉裁切，但那是另一类需求了
记住一点：CSS 里“让某物不影响文字”的本质，永远是分层与定位，不是混合模式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
