CODEWITHSUNDEEP
cssfirefoxmask
Atthapon Junpun-eak
Atthapon Junpun-eak

Reputation: 540

How to do image mask on Firefox?

I've tried to mask image with my png and it perfectly works on chrome. However, it doens't work on Firefox. Here is the style I used

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

Does Firefox support masking and how to do it?

Upvotes: 1

Views: 5396

Answers (1)

fearis
fearis

Reputation: 499

PNG opacity for all browsers (old IE need PNG transparent js)

The best idea is to use png as a main image and use it as a frame Example:

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

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

You can use JS for masking all images on your page:

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;
    }
}
}

Masking for Firefox with SVG + CSS

If You can't use JS You can use SVG masking like this:

html

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

css

svg inside html

mask:url(#masking)

svg outside html 

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

Upvotes: 3

Related Questions