mask-image 直接写 url 无效是因为缺少 mask-size 等关键声明；需配合 mask-size（如 cover）、mask-repeat: no-repeat、mask-position 和 mask-mode 才能确保跨浏览器正常显示。
mask-image 设置蒙版图像时为什么图片不显示
直接写 mask-image: url(logo.png) 通常没效果，因为浏览器默认把蒙版图像缩放到 0×0 或按原图尺寸平铺，而蒙版区域默认是元素整个盒模型——如果蒙版图太小或没对齐，就完全遮不住内容。关键不是“有没有设”，而是“能不能覆盖目标区域”。
- 必须显式设置
mask-size（比如cover、100% 100%或具体像素值），否则多数浏览器按auto处理，结果不可控 -
mask-repeat默认是repeat，容易造成多块蒙版拼接出奇怪边缘，一般应设为no-repeat -
mask-position决定蒙版图起点，默认是center center，但若容器宽高比和蒙版图不一致，会裁切，此时需配合mask-size: contain或手动调位置
mask-source 是什么？它和 mask-image 有什么区别
mask-source 并不是标准 CSS 属性——这是常见误解。CSS Masking 规范中只有 mask-image（用于指定蒙版图像源），而 mask-source 是旧版 WebKit 实现（如早期 Safari）的私有前缀属性，早已被弃用。现在所有主流浏览器（Chrome 53+、Firefox 53+、Safari 15.4+）只认 mask-image。
- 写
-webkit-mask-source: url(x.png)在新 Safari 上会被忽略，必须改用mask-image - 若同时写了
-webkit-mask-image和mask-image，现代浏览器优先使用后者；老 Safari 只读前者，所以建议双写以保兼容 - SVG
<mask></mask>元素作为蒙版源时，应通过mask-image: url(#myMask)引用，不是用 “source” 字样
mask-size 取值对蒙版效果的实际影响
mask-size 控制的是蒙版图像在蒙版层上的渲染尺寸，直接影响哪些区域透明、哪些不透明。它不像 background-size 那样只影响视觉填充，而是直接决定 alpha 通道的采样范围。
-
mask-size: cover：等比缩放蒙版图，完全覆盖容器，可能裁边——适合用 logo 做全图遮罩 -
mask-size: contain：等比缩放至完全可见，留黑边——适合保留蒙版图完整形状，比如文字镂空效果 -
mask-size: 200px 100px：强制拉伸，可能失真，但可精确控制蒙版纹理密度 - 单值写法如
mask-size: 50%等价于50% 50%，注意百分比基于容器尺寸，不是蒙版图原始尺寸
实际组合写法与易错点
一个可靠可用的图片蒙版声明，往往要同时约束图像源、尺寸、重复、定位和合成模式。漏掉任意一项，都可能导致在某些浏览器里失效或显示异常。
- 必须加
mask-mode: luminance（或alpha）来明确提取灰度/透明度通道，否则部分浏览器（如旧 Firefox）可能按默认alpha解析失败 - 推荐写法：
img { mask-image: url(mask.png); mask-size: cover; mask-repeat: no-repeat; mask-position: center; mask-mode: luminance; } - 如果蒙版图是 PNG 且含透明通道，
mask-mode: alpha更稳妥；若是黑白渐变 PNG，用luminance才能正确映射明暗为透明度 - 不要依赖
mask简写属性——它的语法复杂且各浏览器解析差异大，尤其在处理多个蒙版层时极易出错
mask-mode 的显式声明和 mask-repeat: no-repeat 的补全。这两个看似次要的字段，恰恰是跨浏览器蒙版一致性的分水岭。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
