How can I make a mask with cross-browser support?

Question

I know how to do a mask in css, but only chrome and safari support this. Is there any replacement for this?

Here is my code:

<div class="character">
    <img src="http://img194.imageshack.us/img194/3854/goldgladiator.png">
    <div class="green-mask"></div>
</div>
<style>
.green-mask {
    display: block;
    height: 200px;
    width: 508px;
    background: rgb(160, 255, 97);
    opacity: .3;
    position: absolute;
    top: 0;
    -webkit-mask-image: url(http://img194.imageshack.us/img194/3854/goldgladiator.png);
}
</style>

I want to make it cross-browser supported.

Answer 1

I had a similar problem and after some research I have come up with a SVG solution. This supports Firefox, Chrome, IE v9 and IE v10. IE v9 and above have support for basic SVG, masking and clipping here are some examples from the microsoft site.

For IE8: I have used the chroma key filter as mentioned in this tutorial: http://thenittygritty.co/css-masking

Here is what I did:

Made the required mask shape as mask.png and applied in on top of the sample.jpg using SVN mask like below:

    <div class="svgMask">
        <svg width="400" height="300" baseProfile="full" version="1.2">
            <defs>
                <mask id="svgmask2" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" transform="scale(1)">
                    <image width="100%" height="100%" xlink:href="mask.png"/>
                </mask>
            </defs>
            <image mask="url(#svgmask2)" width="100%" height="100%" y="0" x="0" xlink:href="sample.jpg"/>
        </svg>
    </div>

I've put a JSFiddle here on the same: http://jsfiddle.net/giri_jeedigunta/Z2J34/

Mobile Support: This worked perfectly fine on iPhone, iPad, Chrome on Android Phones but the native browser on the samsung s3 did not render this code.

Even though most of the online resources like caniuse said that there is support for android, it failed to render on the native browser.