mask-image 才是实现图片渐隐遮罩的核心，mask 只是简写容器；直接写 mask: linear-gradient() 易因重置 mask-size 或 mask-repeat 导致失效；对 标签直接加 mask-image 无效，因遮罩作用于外框而非像素本身；正确做法是将图片设为 background-image 后对容器应用 mask-image，并确保容器有可计算尺寸、mask-size: 100% 100%、mask-repeat: no-repeat；safari 要求渐变色为纯灰度且终点用 transparent，firefox 不支持 mask-image 渐变，需双写前缀或改用 svg ；遮罩逻辑为“亮度即透明度”，白色显示、黑色隐藏；勿混用 opacity；遮罩只读亮度值，png alpha 通道无效。
mask-image 才是实现图片渐隐遮罩的核心，mask 只是简写容器——直接写 mask: linear-gradient() 很容易因重置 mask-size 或 mask-repeat 导致渐隐失效。
为什么 mask-image: linear-gradient() 没反应？
最常见原因不是语法错，而是元素没内容可遮：对 <img> 标签直接加 mask-image，遮罩作用在 img 元素外框（含 padding/border），而非图像像素本身；若图片是响应式（height: auto）且父容器无明确尺寸，遮罩区域常塌陷为 0×0。
- 正确做法：把图片设为容器的
background-image，再对容器应用mask-image - 容器必须有可计算尺寸——显式写
width和height，或用aspect-ratio - 别漏掉
mask-size: 100% 100%，否则默认平铺或缩放失真 -
mask-repeat: no-repeat必须声明，否则渐变会 tile 出奇怪条纹
Safari 和 Firefox 的渐变兼容性怎么破？
Safari 要求渐变颜色必须是纯灰度（#000、#fff、中间灰阶），transparent 或 rgba() 会被忽略或降级；Firefox 目前仍不支持 mask-image 的渐变值，写了等于没写。
- 双写前缀：
-webkit-mask-image: linear-gradient(to bottom, #fff, #000)+mask-image: linear-gradient(to bottom, #fff, #000) - Safari 中终点必须用
transparent（不能用rgba(0,0,0,0)），否则整个遮罩可能全显 - 最稳方案：改用 SVG
<mask></mask>引用，所有现代浏览器都支持，且 alpha 精准可控
渐隐方向与颜色语义容易搞反
遮罩逻辑是“亮度即透明度”：白色区域 = 完全显示，黑色区域 = 完全隐藏，灰色 = 按灰度比例显示。所以从左到右渐隐，得用 to right, #fff, #000，而不是 black, transparent。
- 横向渐隐（如文字右端淡出）：
linear-gradient(to right, #fff, #000) - 纵向渐隐（如图片底部淡出）：
linear-gradient(to bottom, #fff, #000) - 别混用
opacity：它会让整个元素及子树发虚，和遮罩目的冲突；需要叠加透明时，改用rgba(0,0,0,0.7)填充渐变色 stop - 如果用了
backdrop-filter或transform，某些 Safari 版本会静默忽略 mask，需加isolation: isolate
真正容易被忽略的是：遮罩图像本质是单通道灰度图，浏览器只读亮度值。哪怕你用了 PNG 的 alpha 通道，在 mask-image 里也只当灰度图用——边缘柔化得靠渐变缓动或 SVG <fegaussianblur></fegaussianblur>，别指望靠 PNG 透明度微调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
