可在background-image中用逗号分隔linear-gradient()和url()，顺序决定图层上下：渐变在前可作遮罩，图片在前则浮于渐变之上；必须用逗号且显式设置每层的background-size与background-position，否则默认拉伸导致错位或模糊。
background-image 里怎么同时写渐变和图片
直接在 background-image 中用逗号分隔多个层，顺序从上到下：上面的层会盖住下面的层。想让半透明遮罩盖在背景图上，就得把 linear-gradient() 写在 url() 前面。
常见错误是顺序颠倒，结果遮罩被图片盖掉，看起来没效果；或者漏了逗号，导致整个声明被浏览器忽略。
-
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./bg.jpg);✅ 遮罩生效 -
background-image: url(./bg.jpg), linear-gradient(...);❌ 遮罩被压在底下，不可见 -
background-image: linear-gradient(...) url(./bg.jpg);❌ 缺少逗号，语法错误，整条失效
为什么用 rgba 而不是 hsla 或 opacity
linear-gradient() 的颜色参数推荐用 rgba()，因为它是对“颜色本身”加透明度，不影响后续叠加图层的渲染逻辑。而 opacity 是作用于整个元素，会连带把子内容（比如文字、按钮）也变透明，通常不想要这个效果。
hsla() 虽然也能控透明度，但兼容性略弱于 rgba()（尤其老版 Safari），且色相/饱和度调整在此场景中无意义，纯属冗余。
- 遮罩只需控制明暗与透光率，
rgba(0, 0, 0, 0.4)直观又稳妥 - 避免对容器设
opacity，否则内部文字也会变淡，难以阅读 - 单色遮罩不用
hsla()，除非你真要动态调色相（比如主题切换）
遮罩不均匀？检查 gradient 方向和颜色停靠点
默认 linear-gradient() 是从上到下（等价于 to bottom），如果背景图有重点区域（比如人脸在中间），垂直渐变会让上下过暗、中间过亮。这时候得调方向或改成分段色标。
另一个易错点是用了单色但写了两个相同色标，比如 linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)) —— 这其实等效于纯色块，但浏览器可能因解析歧义渲染异常。
- 方向按需选：
to bottom、to right、135deg等 - 要均匀遮罩，就用单色单停靠点：
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)) - 要强调构图，可做两端深、中间浅：
linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.2), rgba(0,0,0,0.6))
IE 兼容问题怎么绕过去
IE10+ 支持多背景和 linear-gradient()，但语法不同：它不认 rgba() 在渐变里，必须用十六进制 + Alpha 滤镜写法（如 #66000000），而且不支持逗号分隔的多背景。
实际项目若还要兼容 IE，更稳妥的做法是套一层伪元素 ::before，把遮罩单独提出来，主元素只负责图片，这样能避开 IE 对多背景的解析限制。
- 现代写法（Chrome/Firefox/Safari/Edge）：
background-image: linear-gradient(...), url(...); - IE 友好写法：用
::before绝对定位盖在background-image: url(...)上方 - 不必为 IE 强行降级整个方案，优先保障主流浏览器体验
CSS 多背景叠加看着简单，但顺序、语法容错率低、IE 行为不一致，最容易卡在“写了没反应”——先盯紧逗号和前后顺序，再调透明度值，最后才动方向和停靠点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
