hsla() 不能直接作遮罩，需用 linear-gradient(hsla(), hsla()) 生成图像层并置于 url() 前；多层 background-image 必须分别声明 size、position、repeat；伪元素方案更稳妥。
hsla() 本身不能直接生成遮罩图层
很多人误以为写 background-color: hsla(0, 0%, 0%, 0.4) 就能给背景图加遮罩，其实不行——background-color 是底层色，它不会叠加在 background-image 上方，只在图片加载失败时兜底显示。想让半透明层“盖住”背景图，必须把它变成一个真正的图像层。
正确做法是用 linear-gradient() 包一层 hsla()，让它返回 <image></image> 类型：
background-image: linear-gradient(hsla(0, 0%, 0%, 0.4), hsla(0, 0%, 0%, 0.4)), url(bg.jpg);
- 必须用逗号分隔，且
linear-gradient()写在url()前面，否则遮罩被压在底下不可见 - 起点和终点都用相同
hsla()值，避免 Safari 渲染出意外渐变或色带 - 别用
hsla(0, 0%, 0%, 0)或transparent作起点，会导致局部透出、遮罩不均
为什么不用 rgba() 而选 hsla()？
如果只是压暗背景图，rgba(0, 0, 0, 0.4) 更轻量、兼容性更好；但当你需要统一整套 UI 的色调体系（比如所有遮罩都基于主品牌色相 200°），hsla() 就有明显优势：
-
hsla(200, 100%, 50%, 0.4)可快速复用到按钮悬停、卡片蒙版、模态框 backdrop 等多处，保持视觉一致性 - 调整饱和度或亮度就能衍生出不同层级的遮罩（如
hsla(200, 100%, 30%, 0.6)更深更稳），而不用反复换 RGB 值 - 在 CSS 自定义属性中配合
calc()动态调光也更直观：--mask-light: calc(50% - var(--depth) * 10%)
background-image 多层叠加时的必设项
只写 background-image 不够，浏览器会按默认值拉伸每一层，导致遮罩错位、模糊或只覆盖左上角一小块。必须显式声明每层的尺寸与定位：
background-image: linear-gradient(hsla(200, 100%, 50%, 0.4), hsla(200, 100%, 50%, 0.4)), url(bg.jpg);<br>background-size: cover, cover;<br>background-position: center, center;<br>background-repeat: no-repeat, no-repeat;
- 两层要分别写
cover，不能简写成background-size: cover——后者只作用于第一层 -
background-repeat: no-repeat必须配对写，否则第二层（图片）可能平铺，遮罩层却被限制为单块 - 如果容器宽高不固定（如响应式卡片），建议加
background-attachment: fixed防止滚动时遮罩“滑走”
hover 动态切换遮罩强度的写法
伪元素 + hsla() 是最稳妥的悬停遮罩方案，不依赖 background-image 层叠规则，也不影响图片本身：
.card { position: relative; }<br>.card::before {<br> content: "";<br> position: absolute;<br> inset: 0;<br> background-color: hsla(200, 100%, 50%, 0);<br> transition: background-color 0.3s;<br>}<br>.card:hover::before {<br> background-color: hsla(200, 100%, 50%, 0.5);<br>}
- 用
inset: 0替代top/left/right/bottom: 0，更简洁且兼容现代浏览器 - 初始
background-color设为hsla(..., 0)，不是transparent，避免部分旧版 Chrome 在过渡中闪白 - 如果遮罩上还要放文字或按钮，必须确保伪元素
z-index高于图片但低于内容层，且内容需有明确position（如relative）才能参与层叠上下文
实际项目里最容易忽略的是：多层 background-image 的每个参数都得独立声明，漏一个就可能导致整条样式失效或渲染异常。别图省事合并写，宁可多几行，也要每层都写全。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
