mask-image 渐隐在响应式中失真是因渐变按绝对像素渲染且未适配容器尺寸；需用 background-image 替代 img 标签，配合 aspect-ratio、background-size 和 mask-size: 100% 100%，并用十六进制灰阶双写前缀以兼顾浏览器兼容性。
mask-image 渐隐在响应式中为何缩放失真
直接写 mask-image: linear-gradient(to bottom, #000, #fff) 并不能随容器缩放自动适配——因为渐变默认按“绝对像素”渲染，不是相对单位。当容器因 width: 100% 或 aspect-ratio 动态变化时，遮罩区域若没同步拉伸，就会出现渐隐范围错位、只盖住顶部一小条、甚至完全不可见。
必须用 container + background-image 替代 ![]()
对 mask-image 几乎必失败：它作用于整个 img 元素盒模型（含 padding/border），而响应式图片常设 height: auto，父容器又无显式尺寸，导致 mask 绘制区域塌陷为 0×0。
- 把图片设为容器的
background-image，而非 - 容器必须有可计算尺寸：写死
width/height，或用aspect-ratio: 16/9（Chrome/Firefox/Safari 均支持良好） - 配
background-size: cover或contain，确保图填满容器 - 加
mask-size: 100% 100%，强制渐变覆盖整个背景区域
渐变写法要绕开浏览器灰阶解析差异
Safari 要求渐变色只能是纯灰阶（#000 / #333 / #fff），Firefox 目前仍忽略所有 linear-gradient() 声明，Chrome/Edge 需双写前缀才生效。写 transparent 或 rgba() 会直接失效。
- 安全写法：
-webkit-mask-image: linear-gradient(to bottom, #000, #fff); mask-image: linear-gradient(to bottom, #000, #fff); - 禁用
transparent、black、white等别名，全用十六进制灰阶 - 必须加
mask-repeat: no-repeat，否则默认平铺成条纹 - 推荐显式声明
mask-mode: luminance，避免 alpha 模式下边缘锯齿
媒体查询切换方向比 JS 更可靠
滚动组件两侧渐隐、封面图底部渐隐、卡片悬停渐显……这些场景里，横向 vs 纵向遮罩需随视口宽度切换。用 CSS 媒体查询比 JS 动态改 class 更轻量、无重排、兼容性好。
- 桌面端常用
to right实现左右边缘渐隐 - 移动端优先
to bottom，避免关键内容被横向遮罩截断 - 示例：
@media (max-width: 768px) { .fade-container { -webkit-mask-image: linear-gradient(to bottom, #000, #fff); mask-image: linear-gradient(to bottom, #000, #fff); } }
最易被忽略的是 mask-size: 100% 100% 和容器尺寸绑定——漏掉它，哪怕其他都对，在缩放时也会突然失效；另外 Firefox 的渐变不支持是硬限制，真要全兼容就得切到内联 SVG 方案，但多数业务场景其实只需 Safari/Chrome/Edge 支持就够了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
