1

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?

Atthapon Junpun-eak
  • 540
  • 2
  • 11
  • 23
  • 1
    Firefox doesn't support them: http://stackoverflow.com/questions/12284286/are-css-masks-supported-in-firefox – Blender Jul 31 '13 at 10:52
  • check [this answer](http://stackoverflow.com/questions/8414348/is-there-a-moz-mask-css-property-like-webkit-mask-image). Firefox demands a .svg image.. – Lan Jul 31 '13 at 10:53

1 Answers1

3

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");
fearis
  • 424
  • 3
  • 15