直接用mask-image: linear-gradient()难生效，核心是遮罩作用于容器绘制区域而非图片像素，且需容器设background-image、有可计算尺寸、mask-size:100% 100%、mask-repeat:no-repeat；Safari要求#000/#fff灰阶，Firefox不支持渐变，须改用内联SVG方案。
直接用 mask-image: linear-gradient() 很难出效果，不是写法错，而是遮罩逻辑、元素结构和浏览器差异共同导致的“静默失效”。核心在于：渐变不作用于图片像素本身，而作用于容器的绘制区域；且各浏览器对颜色值、前缀、支持度要求完全不同。
必须用容器 + background-image 替代 ![]()
标签
对 mask-image 几乎必失败——遮罩套在 img 元素盒模型上（含 padding/border），而响应式图片常无显式高度，导致遮罩区域塌陷为 0×0。
- 把图片设为父容器的
background-image，而非 - 容器必须有可计算尺寸：写死
width和height，或使用aspect-ratio（现代浏览器支持良好） - 确保
background-size: cover或contain，让图填满容器
渐变写法要严格遵循浏览器规则
遮罩生效的关键是“亮度即透明度”：纯黑 #000 完全显示，纯白 #fff 完全隐藏，灰阶控制过渡。别用 transparent、rgba() 或 black/white 别名——Safari 会静默降级，Firefox 直接忽略。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- Safari（15.4+）只认 luminance 模式，必须用
#000和#fff，终点禁用transparent - Firefox 截至 2026 年中仍不支持任何渐变值，声明会被完全忽略
- Chrome/Edge 需双写：
-webkit-mask-image+mask-image，否则可能无反应
关键 CSS 属性一个都不能少
仅写渐变远远不够。mask 是简写容器，很多行为不会自动继承。漏掉任一属性，都可能导致平铺、缩放失真或全显/全黑。
-
mask-size: 100% 100%：防止默认缩放或拉伸，确保渐变覆盖整个容器 -
mask-repeat: no-repeat：避免渐变 tile 成条纹状 -
mask-mode: luminance（可选但推荐）：显式声明解析模式，提升可读性与兼容性
Firefox 兼容方案：内联 SVG 遮罩
当必须支持 Firefox 时，放弃渐变语法，改用 base64 编码的内联 SVG
- SVG 中用
stop-color="black"和stop-color="white"，不能省略或写成fill - URL 必须带锚点，如
url("data:...#m")，否则 Firefox 找不到 - 可将 SVG 写成变量或单独文件，便于复用和维护
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
