CSS webkit-image-mask alternative in JavaScript?

I'm working on my portfolio, and I would like to mask some pictures with a PNG, that's work with the webkit image mas开发者_JAVA百科k but, I would like to have the same result in FF & Opera, do you know a JavaScript script to have the same result?

I tried with edge.js but only work with <img></img> and not with a background in CSS (I made sprite).

Thank you.

Why not simply display the PNG on top of your image?

You can create the element in the HTML after your image, or create it dinamically with JS.

Simply create a DIV and absolute position it on top of your image, then give it the same width and height of your image (or whatever you like), and your PNG as the div's background image, this all via CSS.

You could also use the CSS ::after pseudo-class to style a element without even having to insert it into the DOM via HTML or JS.

http://jsfiddle.net/LuSYQ/1/

And the ::after alternative

http://jsfiddle.net/LuSYQ/11/