应使用伪元素::before实现独立遮罩层，而非直接在背景图上叠加rgba()；需设置容器position: relative、z-index分层，并可配合渐变或background-blend-mode提升适应性。
背景图片上加 rgba() 遮罩后文字/内容看不清
直接在背景图容器上叠加 rgba(0, 0, 0, 0.3) 这类半透明色，常导致遮罩太“薄”——图片细节仍太强，文字反差不足；或太“厚”——整体发灰、失去层次。关键不是调高透明度，而是控制「颜色与图片的混合逻辑」。
-
rgba()是简单叠色，不区分明暗区域，对亮图/暗图效果不一致 - 真正有效的是用
background-blend-mode或伪元素分层控制 - 优先用伪元素（
::before）实现遮罩，避免影响子元素继承和交互
用 ::before 伪元素做独立遮罩层
把遮罩从背景色抽离成绝对定位的覆盖层，能单独调色、调透明度、甚至加渐变，且不影响容器内文字的 color 或子元素样式。
.hero {
position: relative;
background-image: url("bg.jpg");
background-size: cover;
}
.hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}
.hero > * {
position: relative;
z-index: 2;
}- 必须给容器设
position: relative，否则::before会相对 body 定位 -
z-index要明确分层：遮罩层z-index: 1，内容层z-index: 2 - 若需更柔和过渡，可把
background-color换成linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.4))
用 background-blend-mode 替代纯色遮罩
当希望遮罩自动适配图片明暗（比如亮部压暗、暗部提亮），background-blend-mode: multiply 或 overlay 比 rgba() 更智能。但注意浏览器兼容性（IE 不支持）。
.blend-bg {
background-image:
linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url("bg.jpg");
background-blend-mode: multiply;
background-size: cover;
}- 必须写两个
background-image：渐变层 + 图片层，顺序不能反 -
multiply会让整体变暗，适合原图偏亮；screen反而提亮，适合原图偏暗 - 慎用
overlay：对中灰区域增强对比，但容易让高光/阴影过曝
文字反差不够时，别只调遮罩——加文字描边或背景
即使遮罩到位，白色文字在浅灰区域仍可能模糊。这时遮罩已不是瓶颈，该动文字本身。
立即学习“前端免费学习笔记（深入）”；
- 用
text-shadow: 0 0 4px #000, 0 0 8px rgba(0,0,0,0.6)加软黑边，比单纯加深色背景更自然 - 小段文字可用
background-color: rgba(0,0,0,0.7)+padding做局部底衬，避免全屏遮罩干扰构图 - 禁用
mix-blend-mode在文字上——它会和遮罩层、图片层多重混合，结果不可控
遮罩不是越厚越好，重点在于分离控制层：图片、遮罩、文字三者要能独立调节。很多人卡在直接往 background 里塞 rgba()，结果反复调数字却始终不理想——其实是结构错了。
