0

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).

Sonia
  • 253
  • 1
  • 3
  • 16
  • note that i regularly assigned "cer" to ID proprieties of the svg shape. – Sonia Mar 09 '13 at 17:53
  • 1
    See if http://stackoverflow.com/questions/8414348/is-there-a-moz-mask-css-property-like-webkit-mask-image works for you? Found by googling "mdn mask image" – FelipeAls Mar 09 '13 at 17:56

2 Answers2

4

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>
Sampson
  • 265,109
  • 74
  • 539
  • 565
  • For some reason, I haven't been able to access caniuse for weeks... *"Oops! Google Chrome could not connect to caniuse.com"*... I guess it's just me? – Wesley Murch Mar 09 '13 at 17:57
  • @AnnaLica I was just reading that same resource; it is rather confusing in what it attempts to communicate. I suspect it's only talking about SVG, but doing so in a somewhat confusing manner. – Sampson Mar 09 '13 at 17:59
  • in fact i've used a svg file, without success – Sonia Mar 10 '13 at 11:58
  • @AnnaLica I would encourage you to go the SVG route. You'll get better support across the board, and it's not too terribly complicated. Example has been added above. – Sampson Mar 10 '13 at 16:11
  • So you're saying that this alternative method is better supported than "mask" webkit? – Sonia Mar 11 '13 at 19:33
  • @AnnaLica Webkit's implementation is *only* supported in Webkit browsers. SVG is supported in Firefox, Webkit Browsers, Internet Explorer, etc. – Sampson Mar 11 '13 at 19:49
  • Yes, what you mean is to embed an svg file that uses masks for apply effects to an image.. It's simple and it can be donewith photosho in case of "static" image. My is a particolaur situation because i've to mask a video player – Sonia Mar 11 '13 at 20:01
  • 1
    @AnnaLica Your question asked how to mask an `image`, not a `video`. – Sampson Mar 12 '13 at 15:01
  • you right, because i tryied with images, after i will want to mask video – Sonia Mar 13 '13 at 18:13
  • @AnnaLica Videos are another topic entirely. Please consider accepting an answer for this question, and asking about videos in a different question. – Sampson Mar 19 '13 at 20:58
0

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

Ricardo Arrigoni
  • 11
  • 2