linear-gradient实现图片蒙层更稳，因其与background-image同属背景层，不受object-fit、border-radius或缩放影响；而rgba背景易因盒模型导致错位或溢出。
用 linear-gradient 实现图片蒙层，为什么比 rgba background 更稳？
因为 linear-gradient 是背景层的一部分，和 background-image 同属一个渲染上下文，不会因 object-fit、border-radius 或缩放导致蒙层错位或溢出。而直接给容器设 background: rgba() 时，如果容器有圆角或 padding，蒙层会铺满整个盒模型区域，可能盖住不该盖的地方。
多背景语法中 linear-gradient 蒙层的写法要点
必须把渐变写在图片前面，用逗号分隔；透明度靠渐变色 stop 的 alpha 值控制，不是靠 opacity：
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('photo.jpg');- 两个 stop 必须一致（否则会拉出过渡带），单色渐变本质就是“一层纯色”
-
background-size: cover和background-position: center只作用于图片部分，不影响渐变层 - 不支持伪元素或额外 DOM，结构最干净，适合静态封面图、卡片背景
常见错误：渐变蒙层没生效或颜色发灰
原因通常是这几种：
- 渐变写在图片后面：
url(...) , linear-gradient(...)→ 渐变被图片盖住，完全不可见 - 用了十六进制带 alpha（如
#0008）→ 多数浏览器不识别，降级成不透明黑 - 忘记设
height或min-height→ 容器高度塌陷，蒙层无处可绘 - 父容器有
overflow: hidden但子元素用了transform→ 某些 Safari 版本会裁掉渐变边缘
和伪元素 ::before 方案比，什么时候该选 linear-gradient？
优先选它，当满足以下任一条件：
立即学习“前端免费学习笔记（深入）”；
- 不需要对蒙层单独加
hover动画或点击事件（pointer-events不适用） - 图片是
background-image，不是<img alt="CSS如何实现图片上的文字半透明遮罩_LinearGradient蒙层技术" >标签（此时伪元素需额外处理定位锚点） - 要兼容 IE11（
::before+opacity过渡在 IE11 中不工作，但多背景语法支持） - 项目已禁用伪元素（比如某些 CSS-in-JS 库默认不渲染
content: ""）
真正容易被忽略的是：渐变蒙层无法响应图片内容变化——比如图片加载失败时，它仍会固执地铺一层黑灰，得靠 :not(:has(img[src])) 这类选择器兜底，但目前浏览器支持有限，实际还得靠 JS 监听 onerror 切换 class。
