应优先使用rgba或hsla设置背景透明度，避免opacity导致内容整体变淡；若背景图遮挡文字，需检查background-image的尺寸、位置及是否设置背景色兜底。
背景颜色覆盖内容，通常不是因为 background 本身“盖住”了内容，而是误用了 opacity 或 background-color 的透明度设置，导致整个元素（包括文字、子元素）变透明或被遮挡。关键要分清：background-color 控制的是背景层，opacity 控制的是整个元素及其所有子内容的透明度。
background-color 透明 ≠ opacity 透明
background-color 支持 rgba() 或 hsla()，可以单独让背景半透，文字和子元素完全不透明：
-
✅ 正确做法：
background-color: rgba(0, 0, 0, 0.3);→ 背景微黑半透，文字依然清晰 -
❌ 错误混淆：
opacity: 0.3;→ 整个盒子（含文字、按钮、图片）都变淡，像蒙了层灰
为什么 opacity 会让内容“被盖住”
opacity 是作用于整个渲染层的：它会降低该元素及其所有后代的可见度，且无法通过子元素设置 opacity: 1 恢复——子元素的透明度是相对于父级叠加计算的。
- 即使你给文字写
opacity: 1，它实际显示仍是1 × 0.3 = 0.3 - 如果背景色深 + opacity 低，文字就会显得发灰、模糊、难以辨认
- 这不是“覆盖”，是整体变淡造成的视觉压制
想实现“背景柔和、内容锐利”，用这些替代方案
优先避开 opacity，改用更精准的控制方式：
立即学习“前端免费学习笔记（深入）”；
- 用
rgba(0,0,0,0.1)或hsla(0,0%,0%,0.1)设背景透明度 - 用伪元素
::before单独画一层半透背景，再用z-index确保内容在上层 - 使用
backdrop-filter: blur(4px);（配合background: rgba(...)）做毛玻璃效果，内容完全不受影响
检查顺序：先看是不是 background-image 搞的鬼
有时你以为是 background-color 盖住了，其实是 background-image 图片过大、重复或位置偏移，把文字区域挡住了：
- 检查是否写了
background-image: url(...);却没设background-color做兜底 - 确认
background-size和background-position是否合理（比如background-size: cover;可能裁剪掉关键区域） - 临时加一句
background-color: pink;，看是否真有图层遮挡——粉色会立刻暴露问题
