Css 如何在Firefox上进行图像屏蔽？

我试着用我的png遮罩图像，它在chrome上完美地工作。 但是，它在Firefox上不起作用。 这是我用的款式

-webkit-mask: url("../img/mask.png");
-o-mask: url("../img/mask.png");
-ms-mask: url("../img/mask.png");

Firefox是否支持屏蔽以及如何实现？

PNG不透明度适用于所有浏览器（旧IE需要PNG透明js） 最好的办法是将png用作主图像，并将其用作帧 例如：

<img src="mask.png" alt="PNG which will mask" id="maskedImage"/>

#maskedImage { background:url(your_image_for_masking.jpg); }

使用SVG+CSS屏蔽Firefox 如果不能使用JS，可以使用SVG掩蔽，如下所示：

html html之外的svg

mask: url("svg.svg#maskid");

---

Firefox不支持它们：检查。Firefox需要一个.svg图像。。

<svg>
 <defs>
  <mask maskContentUnits="objectBoundingBox" maskUnits="objectBoundingBox" id="masking">
    <circle fill="white" r=".35" cy=".5" cx=".5"/>
  </mask>
 </defs>
</svg>

mask:url(#masking)

mask: url("svg.svg#maskid");