Wie kann ich eine Maske mit browserübergreifender Unterstützung erstellen?

Question

Ich weiß, wie man eine Maske in CSS macht, aber nur Chrom und Safari unterstützen dies. Gibt es einen Ersatz dafür? vielleicht jquery plugin oder sowas?

Hier ist mein 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> 

ich es Cross-Browser unterstützt machen wollen.

Dank und sorry für mein Englisch ...

Answer 1

Ich hatte ein ähnliches Problem und nach einigen Recherchen habe ich mit einer SVG-Lösung. Dies unterstützt Firefox, Chrome, IE v9 und IE v10. IE v9 und höher haben Unterstützung für grundlegende SVG, Maskierung und Clipping hier sind einige Beispiele von der Microsoft-Website.

Für IE8: ich die Chroma-Key-Filter verwendet haben, wie in diesem Tutorial erwähnt: http://thenittygritty.co/css-masking

Hier ist, was ich tat:

Hergestellt die erforderliche Maskenform als mask.png und angewandter in auf dem sample.jpg SVN-Maske wie unten:

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

ich habe ein setzen JSFiddle hier auf dem gleichen: http://jsfiddle.net/giri_jeedigunta/Z2J34/

Mobile: Das funktionierte völlig in Ordnung, auf dem iPhone, iPad, Chrome auf Android-Telefone aber der native Browser auf dem Samsung s3 diesen Code nicht machen.

Obwohl die meisten Online-Ressourcen wie caniuse sagten, dass es Unterstützung für Android gibt, konnte es nicht auf dem nativen Browser rendern.