mask-image不支持直接使用十六进制颜色值，必须用linear-gradient()等图像函数包裹；正确写法为mask-image: linear-gradient(to top, #000000cc, #00000000)；八位十六进制需浏览器支持（safari 15.4+等），兼容性差时应叠加rgba()回退。
mask-image 用十六进制颜色会直接失效
因为 mask-image 不接受纯颜色值，只接受图像（url()、linear-gradient()、radial-gradient() 或 conic-gradient()）。写成 mask-image: #00000080 是语法错误，浏览器会静默忽略整条声明。
蒙版需要带 alpha 的渐变图像，不是单色
想用十六进制实现“从黑到透明”的蒙版，必须把十六进制颜色放进 linear-gradient() 里作为颜色节点，而不是直接赋给 mask-image：
div {
mask-image: linear-gradient(to top, #000000CC, #00000000);
}
-
#000000CC是不透明度约 80% 的黑色（CC 十六进制 ≈ 204/255） -
#00000000是完全透明的黑色（alpha = 00） - 方向必须明确写
to top或to bottom，不能省略 - 注意：Safari 15.4+、Chrome 93+、Firefox 99+ 支持八位十六进制；Safari 15.3 及更早版本不支持，会回退为全黑
兼容性差时别硬套 #RRGGBBAA，改用 rgba() 回退
如果项目要支持 Safari 15.3 或 Android WebView 旧版本，mask-image 中混用两种写法最稳妥：
div {
mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
mask-image: linear-gradient(to top, #000000CC, #00000000);
}
- CSS 解析器会取最后一条有效声明，现代浏览器用八位十六进制，老版本 fallback 到 rgba()
- 别写成
mask-image: linear-gradient(to top, #000, rgba(0,0,0,0))—— 混用简写和函数会导致整条渐变失效 - 确保父容器有
position: relative，且蒙版元素自身不设opacity，否则透明度叠加会失真
mask-image 和 background-image 的 alpha 行为完全不同
这是最容易踩的坑：mask-image 的 alpha 值控制的是「遮罩区域的可见比例」，不是颜色本身透光。比如 #00000080 在 mask 中表示该位置显示原内容的 80%，不是“半透明黑”：
-
mask-image: linear-gradient(to top, #000000FF, #00000000)→ 底部 100% 隐藏、顶部 0% 隐藏（即完全显示） - 而
background-image: linear-gradient(...)里的#00000080是渲染出半透明黑色图层 - 所以蒙版里写
#FFFFFF80和#00000080效果一样——alpha 才是关键，RGB 分量几乎无影响（除非用在 luminance mask）
真正要调蒙版强度，只动最后两位（AA），RGB 部分填 000000 最安全，避免意外色偏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
