video元素加mask-image失效的根本原因是渲染行为与遮罩生效条件不匹配：必须显式设置宽高、避免父级overflow:hidden裁剪、配齐-webkit-前缀及mask-mode等配套属性，且遮罩图尺寸需精确控制。
mask-image 能给视频加蒙版，但直接套用图片或渐变常失效——根本原因不是语法错，而是视频元素的渲染行为和遮罩生效条件不匹配。
video 元素必须显式设置宽高和可绘制内容
浏览器对 的默认渲染是“惰性的”：若没设 width/height，或父容器 overflow: hidden 裁剪过界，mask-image 会静默退回到 none。
- 确保
有明确的width和height（不能只靠max-width: 100%） - 避免父级设置
overflow: hidden同时又让视频撑出容器（此时遮罩区域被裁掉） - 如果用
object-fit: cover，需同步配mask-size: cover，否则遮罩图和视频内容错位
mask-image 渐变写法要避开 rgba 透明度陷阱
在 Firefox 中，mask-image: linear-gradient(to right, black, transparent) 可能完全失效；Chrome/Safari 则依赖 mask-mode 默认值（alpha），但渐变里用 rgba(0,0,0,0) 会被当成亮度通道处理，导致遮罩反向。
- 优先用
transparent或纯色 +alpha渐变，例如：linear-gradient(to right, #000, transparent) - 显式声明
mask-mode: alpha（尤其在多浏览器兼容场景下） - 避免在渐变中混用
black和rgba(0,0,0,0)，二者在不同引擎中解析逻辑不一致
使用 PNG/SVG 遮罩图时的路径与尺寸坑
视频蒙版对遮罩图尺寸极其敏感：一张 200×200 的 mask.png 应用于 800×600 的视频，若没设 mask-size，默认拉伸会糊掉边缘细节，甚至让半透明过渡区崩成硬边。
- 推荐用
mask-size: 100% / 100%或mask-size: cover，避免默认的auto - SVG 遮罩需确保
white或#fff（Firefox 强制要求，否则全黑不显示） - 外部 SVG 文件引用（
url('mask.svg')）必须同源，或服务端配好 CORS，否则控制台无报错但遮罩不加载
必须加 -webkit- 前缀且顺序不能错
截至 2026 年 4 月，Safari 19、Chrome 124、Edge 124 仍要求 -webkit-mask-image 优先于标准属性；若只写标准属性，Safari 下整个蒙版失效。
- 正确写法是先写
-webkit-mask-image，再写mask-image - 所有配套属性（
mask-size、mask-position、mask-repeat）都需双写，且-webkit-版本必须在前 - 不要依赖 Autoprefixer 自动补全——它对
mask-*系列支持不稳定，建议手写
最易被忽略的一点：视频蒙版无法作用于 poster 图片，只影响播放中的帧；如果想连封面也一起遮罩，得把 包进一个 ，对该容器应用 mask-image，并让 poster 作为该容器的 background-image。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
