最稳方案是background多层叠加linear-gradient和url()；rgba()非图像层会被忽略，须用linear-gradient(rgba(),rgba())伪装颜色层；渐变需写在url前并分设size/position；定向渐变更实用，旧版safari需-webkit-前缀及角度单位。
直接用 background 多层叠加 linear-gradient 和 url() 就能实现，不需要伪元素、不用 opacity、也不依赖 background-blend-mode —— 这是最稳、最轻、兼容性最好的方案。
为什么 background: rgba(), url() 不生效
浏览器会直接忽略 rgba(0,0,0,0.5) 这部分，因为它不是 <image></image> 类型，无法参与背景图层叠加。最终只渲染 url(bg.jpg)，rgba() 只在图片加载失败时兜底显示，完全起不到遮罩作用。
-
background-color或background: rgba()单独写，永远不和图片叠加 - 想叠加颜色，必须把颜色“伪装”成图像层，而
linear-gradient(rgba(), rgba())正是标准且被广泛支持的方式 - 别用
transparent作起点（如linear-gradient(black, transparent)），开头的black会完全挡住内容；统一用带 alpha 的值，比如rgba(0,0,0,0.4)到rgba(0,0,0,0)
linear-gradient 层顺序与尺寸控制必须显式分开
多层背景默认共享 background-size 和 background-position，但渐变没有原始尺寸，强行拉伸会导致图片错位或模糊。
- 渐变层必须写在
url()前面，否则会被盖住：background: linear-gradient(...), url(...) - 必须按层配对尺寸：
background-size: 100% 100%, cover→ 第一组给渐变（填满容器），第二组给图片（等比缩放） - 位置也要分设：
background-position: top, center→ 渐变锚点在顶部，图片居中，避免黑条只盖左上角 - 别以为
background-repeat: no-repeat就能对齐——没设background-position，两层的“中心”根本不在一起
响应式遮罩的关键是渐变方向 + 透明度区间
全图均匀压暗容易吃掉细节；更实用的是定向渐变，把遮罩“托”在文字/按钮所在区域下方或一侧。
- 文字在底部？用
linear-gradient(to top, rgba(0,0,0,0.6), transparent 70%) - 标题靠左？用
linear-gradient(to right, rgba(0,0,0,0.4), transparent 70%) - 透明度建议从
0.2～0.6试起：太低不明显，太高吞细节 - 旧版 Safari 对
linear-gradient的透明度写法敏感，优先用rgba()，避免hsla()或transparent混用
IE11 / 旧版 Safari 兼容要点
IE11 支持 ::before 但不支持 inset，aspect-ratio 全不支持，linear-gradient 需加 -webkit- 前缀，且透明度写法要保守。
- 替换
inset: 0为top: 0; left: 0; right: 0; bottom: 0 - 渐变写两遍：
background: -webkit-linear-gradient(top, rgba(0,0,0,0.7), transparent)和background: linear-gradient(0deg, rgba(0,0,0,0.7), transparent) - 别用
to top这类关键词，改用角度单位（如0deg），避免旧版 Safari 解析不一致 - 如果项目仍需支持 IE9，才考虑用
::after+position: absolute，但必须写content: ""，且加z-index: 1
最容易被忽略的是：所有层的 background-position 和 background-size 必须一一对应、显式声明。很多人写了多层 background，却只设了一次 size，结果渐变撑满、图片变形，还以为是 CSS 写错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
