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，结构最干净，适合静态封面图、卡片背景

常见错误：渐变蒙层没生效或颜色发灰

原因通常是这几种：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 渐变写在图片后面：url(...) , linear-gradient(...) → 渐变被图片盖住，完全不可见
• 用了十六进制带 alpha（如 #0008）→ 多数浏览器不识别，降级成不透明黑
• 忘记设 height 或 min-height → 容器高度塌陷，蒙层无处可绘
• 父容器有 overflow: hidden 但子元素用了 transform → 某些 Safari 版本会裁掉渐变边缘

和伪元素 ::before 方案比，什么时候该选 linear-gradient？

优先选它，当满足以下任一条件：

• 不需要对蒙层单独加 hover 动画或点击事件（pointer-events 不适用）
• 图片是 background-image，不是 标签（此时伪元素需额外处理定位锚点）
• 要兼容 IE11（::before + opacity 过渡在 IE11 中不工作，但多背景语法支持）
• 项目已禁用伪元素（比如某些 CSS-in-JS 库默认不渲染 content: ""）

真正容易被忽略的是：渐变蒙层无法响应图片内容变化——比如图片加载失败时，它仍会固执地铺一层黑灰，得靠 :not(:has(img[src])) 这类选择器兜底，但目前浏览器支持有限，实际还得靠 JS 监听 onerror 切换 class。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！