Comment puis-je faire un masque avec de la croix-prise en charge du navigateur?

Je sais comment faire un masque dans le css, mais seulement chrome et safari en charge cette.
Il y a tout de remplacement pour cela?

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

Je veux faire de la croix-navigateur pris en charge.

OriginalL'auteur HtmHell | 2013-05-30

  1. 9

    J'ai eu un problème similaire et après quelques recherches je suis venu avec une SVG de la solution. Cela prend en charge Firefox, Chrome, IE v9 et IE v10. IE v9 et au-dessus du support de la base SVG, de masquage et de coupure voici quelques exemples sur le site de microsoft.

    Pour IE8: j'ai utilisé le chroma key filtre comme indiqué dans ce tutoriel: http://thenittygritty.co/css-masking

    Voici ce que j'ai fait:

    Fait de la nécessaire forme de masque comme masque.png et appliquées sur le dessus de la sample.jpg utilisation de SVN masque comme ci-dessous: 

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

    J'ai mis un JSFiddle ici sur le même: http://jsfiddle.net/giri_jeedigunta/Z2J34/

    Support Mobile: Cela fonctionnait parfaitement bien sur iPhone, iPad, google Chrome sur les Téléphones Android, mais le navigateur natif sur le samsung s3 n'a pas le rendu de ce code.

    Même si la plupart des ressources en ligne comme caniuse dit qu'il ya un soutien pour android, il n'a pas rendu sur le navigateur natif.

    Une grande réponse 🙂
    ce genre de travaux pour moi, mais j'ai dû créer un masque pour chaque point d'arrêt afin de répondre sélectionnant chacune avec une requête de média dans le css. Je n'arrive pas à remplir son récipient.
    avez-vous obtenu une solution pour android natif du navigateur? Je suis à la recherche pour elle, mais n'a pas obtenu de solution
    Cela fonctionne parfaitement. J'ai masqué un rectangle avec png, svg, icônes, créant ainsi des unicolore versions en pur html/css. @danielCrabbe: essayez preserveAspectRatio="none" dans votre balise svg.

    OriginalL'auteur giri-jeedigunta