mask-image对img标签失效主因是样式干扰与浏览器限制：需显式设置宽高、display:block，用-webkit-mask-image兼容Safari，SVG必须闭合路径、fill="#fff"、声明viewBox并URL编码。
mask-image 为什么对 img 标签直接失效
直接给 <img> 加 mask-image 常常没反应，不是写法错，而是 Bootstrap 或现代框架默认的图片样式干扰了 mask 渲染。比如 .img-fluid 设了 height: auto，而 mask 需要明确的宽高才能定位遮罩区域；Safari 还会拒绝渲染无尺寸的 <img> 上的 mask。
- 必须显式设置
width和height（不能只靠max-width: 100%） -
<img>默认是display: inline，但某些浏览器要求display: block才触发 mask 计算 - 避免用简写
mask: url(...)，Safari 目前只认-webkit-mask-image+ 独立属性 - 如果头像来自 CDN 或跨域，优先用 data URI 内联 SVG，避开 CORS 导致的 mask 加载失败
用 SVG 作为 mask-image 的四个硬性条件
设计师给的 SVG 文件不能直接扔进 mask-image: url(...) —— 多数情况下会白屏或错位。真正起作用的只有满足以下四点的 SVG：
-
<path>必须闭合（以Z结尾），且fill="#fff"（不是#000或透明） - 必须声明
viewBox，且其宽高比尽量匹配目标容器（例如头像 200×200，viewBox="0 0 200 200"） - 要用
url("data:image/svg+xml,...")编码，不能直接写内联<svg>标签 - 必须同时写
-webkit-mask-image和mask-image，Safari 16.4+ 虽支持标准属性，但部分 SVG 渲染仍依赖前缀
示例（水滴形）：mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100,30 Q150,80 130,130 Q110,170 100,180 Q90,170 70,130 Q50,80 100,30 Z' fill='%23fff'/%3E%3C/svg%3E");
文字环绕不规则头像？别指望 mask-image
mask-image 只控制像素是否绘制，不改变盒模型边界 —— getBoundingClientRect() 返回的仍是完整矩形，float 和 shape-outside 完全无视它。
立即学习“前端免费学习笔记（深入）”；
- 想让文字绕着水滴形头像排版，必须用
shape-outside: url("outline.png")，其中 PNG 是黑形+全透明背景，尺寸与容器一致 - 或者用内联
<svg>定义<clipPath>，再配shape-outside: url(#my-clip) -
mask-image可和上述方案共存：比如先用shape-outside实现文字绕行，再叠加mask-image给边缘加柔化渐隐效果
最易被忽略的细节：fill="#fff" 是铁律
哪怕你用渐变、滤镜或复杂路径，最终参与遮罩计算的只有 alpha 通道值。而浏览器对 SVG 中 fill 的解析，直接决定哪些区域“算白”。写成 fill="white" 或 fill="currentColor" 在 Safari 下可能被当作半透，必须硬编码为 fill="%23fff"（URL 编码后）。
另外，mask-size: contain 比 100% 100% 更安全 —— 容器缩放时不会拉伸变形；mask-repeat: no-repeat 也建议显式声明，防止意外平铺。
