用 linear-gradient 配合 transparent 关键字可直接实现透明渐变蒙版，无需 rgba/hsla；需注意方向、起止位置、叠加层级，并避免常见错误如纯色渐变或 z-index 被遮盖。
直接用 linear-gradient 配合透明色就能实现，不用绕路写 rgba() 或 hsla() 渐变色 stops
CSS 渐变本身支持透明关键字（transparent）和带 alpha 的颜色值，rgba() 和 hsla() 在渐变中不是必须的——反而容易因浏览器解析差异导致意外不透明。真正关键的是：渐变方向、起止位置、叠加层级是否合理。
-
transparent是最稳妥的透明起点/终点，比rgba(0,0,0,0)更可靠（某些旧版 Safari 对 rgba 透明渐变渲染异常） - 渐变必须作为
background-image叠在内容层上方，不能只靠opacity或background-color - 若蒙版要盖住图片或视频，父容器需设
position: relative，渐变层用position: absolute覆盖
常见错误：蒙版“没反应”或“全黑/全白”
多数问题出在渐变色 stops 写法或背景混合模式上。比如写成 background: linear-gradient(to bottom, #000, #000) —— 两头都是纯黑，当然没渐变；又或者忘了把渐变层 z-index 设高，被底下内容盖住了。
- 错误示例：
background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0.8));
→ 起止 alpha 相同，无变化 - 正确写法：
background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.6), #000);
→ 明确从透到半透再到实黑 - 若需兼容 IE10+，可加
filter: progid:DXImageTransform.Microsoft.gradient(...)，但现代项目基本可忽略
用 mask-image 做更精细的蒙版（如非线性、镂空）
当需要顶部淡入 + 底部文字区域完全透明（避开按钮/标题），linear-gradient 背景就不够用了。mask-image 支持用渐变定义“哪些区域该透”，控制粒度更高，且不影响元素自身颜色。
- 仅 Chrome/Firefox/Safari（≥15.4）支持，Edge 102+ 也行；不支持时可用
background渐变降级 - mask 默认黑透白不透，所以用
linear-gradient(to bottom, black, transparent, white)实现“中间透、上下遮” - 必须配合
-webkit-mask-image前缀，且父容器不能有overflow: hidden（会裁掉 mask 区域）
性能注意：避免在滚动容器里用大范围渐变蒙版
如果蒙版盖在整个 body 或长列表上，每次滚动都触发重绘，尤其在低端 Android 上可能掉帧。更轻量的做法是限制蒙版尺寸 + 使用 will-change: transform 提前升层。
立即学习“前端免费学习笔记（深入）”；
- 给蒙版层加
will-change: transform;
（仅当它独立定位且会动时） - 避免写
background: linear-gradient(...)在:hover伪类里反复切换——改用transition: background-position模拟移动效果更省 - 真要动态蒙版，优先考虑
clip-path配合inset()，比渐变少一重合成开销
background 渐变、mask-image 还是 clip-path —— 关键看蒙版是否要响应内容变化、是否需精确避开文字或图标、以及兼容性底线卡在哪。 
