background: rgba() + url() 无效，因 rgba() 非 类型，无法与 url() 叠加；必须用 linear-gradient(rgba(), rgba()) 将遮罩转为图像层，前置书写并统一使用带 alpha 的值，避免 transparent 起点导致遮挡，同时注意 Safari 渲染偏差及层叠上下文影响。
background: rgba() + url() 为什么无效
直接写 background: rgba(0, 0, 0, 0.5), url(bg.jpg) 不会叠加出遮罩，浏览器会忽略 rgba() 这部分——因为它不是有效的背景图像，只被当作无效声明丢弃。最终生效的只有 url(bg.jpg)，background-color 或 rgba() 单独写在 background 里时，**绝不会和图片层叠加**，它只在图片加载失败时兜底显示。
必须用 linear-gradient(rgba(), rgba()) 伪装成图层
核心原理：CSS 的 background 属性支持多个「背景图层」，而 linear-gradient() 返回的是一个图像（
- 写法必须是
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(bg.jpg) - 顺序不能错：颜色层必须写在
url()前面，否则会被盖住 - 别用
transparent作起点，比如linear-gradient(black, transparent)—— black 是完全不透明的，开头就挡住内容；应统一用带 alpha 的值，如rgba(0,0,0,0.4)到rgba(0,0,0,0) - 透明度建议从
0.2～0.6试起，太低没作用，太高吃掉图像细节
想让遮罩贴合文字位置，得控制渐变方向
全图均匀压暗容易让图片失去呼吸感。更实用的做法是定向渐变，把遮罩“托”在关键内容区下方或一侧：
- 文字在底部？用
linear-gradient(to top, rgba(0,0,0,0.6), transparent 70%) - 标题靠左？用
linear-gradient(to right, rgba(0,0,0,0.4), transparent 70%) - 需要立体感？叠两个方向：
linear-gradient(135deg, rgba(0,0,0,0.2), transparent), linear-gradient(45deg, rgba(0,0,0,0.15), transparent) - 所有渐变终点都推荐显式写
transparent或rgba(0,0,0,0)，避免浏览器插值偏差导致色带
移动端 Safari 渲染偏移、边缘发虚怎么办
iOS Safari 对 to bottom 这类正交方向的 linear-gradient 渲染精度低，高 DPR 屏幕上常出现 1px 错位或毛边：
- 绕过办法：把
to bottom改成270.1deg，或to bottom right，避开 Safari 的优化路径 - 别用
background-size: 200% 200%拉伸修复——这会让渐变重复，反而更糊 - 真要精细控制，可换
mask-image: linear-gradient()（iOS 15.4+ 支持），但得权衡兼容性 - 调试时打开 DevTools，检查 computed 样式里
background是否完整解析，有没有整条被标记为 invalid
真正难的不是写出那行 linear-gradient，而是你得同时盯住三件事：父容器是否 position: relative、z-index 是否被意外隔离进新层叠上下文、Safari 在不同 DPR 下对角度的解析是否一致——少盯一根，遮罩就飘了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
