直接用 background: rgba() 加遮罩会失效，因为 rgba() 不是图像类型，浏览器解析多层背景时会忽略它；正确解法是用 linear-gradient(rgba(), rgba()) 作为图像层与图片叠加，并确保渐变写在 url() 前面、分设 background-size 和 background-position、控制渐变区间以适配文字位置。
为什么直接用 background: rgba() 给图片加遮罩会失效
因为 rgba() 不是图像类型，浏览器在解析多层背景时会直接忽略它，只渲染后面的 url()。你写的 background: rgba(0,0,0,0.6), url(img.jpg) 实际上等于没写遮罩——rgba() 被丢弃，只剩一张图。真正能参与背景叠加的“颜色层”，必须是图像格式，而 linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)) 就是标准解法：它被识别为 <image></image> 类型，能和图片同层渲染。
linear-gradient 写在 url() 前面才能盖住图片
多层背景从左到右绘制，越靠左的层越靠近用户视线。遮罩必须写在图片前面，否则会被盖住：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0)), url('photo.jpg');
- 两个
rgba()的 alpha 值必须一致（比如都用0.8和0），否则会拉出意外过渡带 - 别用
transparent作终点——某些浏览器会把它转成rgba(0,0,0,1)，导致底部变全黑 - 方向选
to bottom而不是0deg，语义更清晰，旧版 Safari 对关键词支持也更稳
响应式下遮罩错位？关键是分设 background-size 和 background-position
渐变层和图片层默认共享尺寸与定位，但它们的“缩放逻辑”完全不同：图片要 cover，渐变要填满容器。不分开控制就会错位或拉伸：
background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0)), url('photo.jpg');
background-size: 100% 100%, cover;
background-position: top, center;
- 第一组
100% 100%让渐变铺满整个容器（锚点在顶部） - 第二组
cover让图片等比缩放居中 - 如果只写一个
background-size: cover，渐变会被强行拉伸变形 - 没设
background-position时，两层“中心点”默认不同，容易出现黑条偏移
文字在底部看不清？别硬调透明度，改用定向渐变
全图均匀压暗会让图片细节丢失，尤其当标题/按钮固定在底部时，真正需要加深的是底部区域。用 to bottom 是基础，但更准的做法是控制渐变区间：
background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.7) 100%), url('photo.jpg');
-
60%表示从图片垂直位置 60% 开始渐变，前面保持透明 -
0.7是终点透明度，数值越高越暗，但别超过0.85，否则白字发灰 - 这个值得根据实际文字位置调——用开发者工具拖动百分比，实时观察文字对比度
- WebAIM 要求文字对比度 ≥ 4.5:1，可用 axe DevTools 插件验证
:not(:has(img[src])) 这类选择器目前主流浏览器还没完全支持，兜底还得靠 JS 监听 onerror 切换 class。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
