css - 如何在 Firefox 上做图像遮罩？

Question

我试图用我的 png 来掩盖图像，它在 chrome 上完美运行。但是，它不适用于 Firefox。这是我使用的风格

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

Firefox 是否支持屏蔽以及如何做到这一点？

Answer 1

所有浏览器的PNG不透明度（旧IE需要PNG透明js）

最好的办法是使用 png 作为主图像并将其用作框架示例：

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

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

您可以使用 JS 来屏蔽页面上的所有图像：

var png_overlay = 'mask.png'

function pngFrame() {
var imgs = document.images;
for( var i = 0, img; img = imgs[i]; i++ ) {
    if( img.className.indexOf('frame') >= 0 ) {
        var bgSrc = img.src;
        img.style.background = "url(" + bgSrc + ")";
        img.src = png_overlay;
    }
}
}

使用 SVG + CSS 为 Firefox 遮罩

如果你不能使用 JS 你可以像这样使用 SVG 掩码：

html

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

css

html里面的svg

mask:url(#masking)

svg 外部 html

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