面具在Firefox中不起作用

Question

I've the last version of firefox and there are no ways for make the masks working. I read all the discussion about this problem, and no one of the solution adopted works.

I've assigned an ID to the object too (the file for the mask is an SVG)

This is the code

<img id="immy" src="http://www.hdwallpapersarena.com/wp-content/uploads/2012/05/22-amazing-landscape.jpg">

css

#immy
{
    -webkit-mask-image: url(cerchio.svg); /*chrome*/
    mask: url(cerchio.svg#cer); /*firefox*/
}

In chrome all works fine, while in FF i see only a full white page (such if the mask covers all the image).

Answer 1

CSS Masks are an experimental feature currently only implemented in Webkit. They aren't currently fully-supported in Firefox, Internet Explorer, or any other non-webkit browser.

Source: http://caniuse.com/#search=mask

Masks are supported in all major browsers (including IE9+) for SVG elements. Going that route would give you a far more consistent experience everywhere. See http://jsfiddle.net/jonathansampson/S7ctE/

<svg width="100" height="100">
    <defs>
        <pattern id="a" patternUnits="userSpaceOnUse" width="100" height="100">
            <image xlink:href="http://i.imgur.com/7Nlcay7.jpg" x="0" y="0" width="100" height="100" />
        </pattern>
    </defs>
    <polygon fill="url(#a)" points="25 0, 50 0, 75 0, 100 25, 100 50, 100 75, 75 100, 50 100, 25 100, 0 75, 0 50, 0 25" />
</svg>

Answer 2

Your firefox version must be 3.5 (1.9.1) or newer.

Check it out more in this link: https://developer.mozilla.org/en-US/docs/CSS/mask