必须用 rgba() 或带 alpha 的颜色值（如 #000000cc）写 linear-gradient，方向用 to top 实现底部深顶部透，且需设置 background-size: 100% 100% 和 background-repeat: no-repeat。
background: linear-gradient() 必须用 rgba() 或 transparent
直接写 background: linear-gradient(to bottom, black, transparent) 看似合理，但多数情况下不会产生“变暗→变亮”的遮罩效果——因为 black 没有 alpha 通道，浏览器把它当完全不透明的纯黑处理，渐变实质是“黑→全透”，视觉上就是底部一块死黑，顶部突然消失。真正起作用的是带透明度的颜色值。
必须显式使用 rgba() 或支持 alpha 的写法：
-
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0))—— 推荐，兼容性好，行为稳定 -
background: linear-gradient(to top, #000000cc, transparent)—— 十六进制带 alpha（Chrome/Firefox 支持，Safari 15.4+），更简洁 - 避免
black → transparent组合：旧版 Safari 对transparent在渐变中解析不一致，容易导致整块蒙层失效或全黑
方向关键词写错会导致蒙层“反向”或不生效
to top 和 to bottom 控制的是渐变“起点→终点”的走向，不是“从哪边开始遮”。比如想让文字在图片底部可读、上方渐隐，就得让深色从下往上过渡变淡——也就是起点在底部，终点在顶部，所以必须用 to top。
常见错误：
- 写成
to bottom：结果是顶部深、底部透，文字反而在最暗处，阅读困难 - 写成
bottom to top：这不是合法语法，CSS 解析失败，整个background-image被丢弃 - 用角度如
0deg：等价于to top，可用，但语义不如to top直观，调试时易混淆
background-size 和 background-repeat 不设就大概率出问题
即使渐变写对了，如果没配好尺寸和重复规则，蒙层会平铺、拉伸、错位，尤其在响应式容器里。默认 background-size 是 auto，background-repeat 是 repeat，这会让一个窄高渐变条在宽容器里横向复制几十次，形成奇怪的条纹。
必须加这两句：
-
background-size: 100% 100%—— 确保渐变铺满整个元素区域，不缩放失真 -
background-repeat: no-repeat—— 防止横向/纵向平铺，这是遮罩类渐变的基本前提 - 若容器高度动态（如由文字撑开），建议补一句
background-attachment: local，避免滚动时蒙层相对内容滑动
蒙层“看不见”或“全黑一片”的真实原因
这两种现象表面相反，根源却相同：蒙层下面没有可对比的背景。所谓“透明”，是相对于它底层的内容而言的。如果父容器没设 background-image 或 background-color，那 rgba(0,0,0,0) 下面就是白色画布，你当然看不出变化；而 rgba(0,0,0,0.8) 盖在白底上，就是一块实心灰黑。
排查顺序很关键：
- 先确认目标元素是否真的叠在图片或深色背景之上（例如用 DevTools 检查 computed styles 中的
background-image是否生效） - 再看蒙层元素有没有
position: relative或absolute，否则可能被其他流式元素挤偏位置 - 最后检查 z-index：蒙层必须比底层图层高、比文字层低，典型结构是
z-index: 1（图层 0）→z-index: 2（蒙层）→z-index: 3（文字）
最容易被忽略的是：你以为在给图片加蒙层，其实只是给一个空 div 加了渐变，底下压根没图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
