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

8

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

Hier ist mein Code:

%Vor%

Ich möchte es browserübergreifend unterstützen.

Danke und Entschuldigung für mein Englisch ...

    
HtmHell 30.05.2013, 16:30
quelle

1 Antwort

9

Ich hatte ein ähnliches Problem und nach einigen Recherchen habe ich eine SVG-Lösung entwickelt. 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 habe den Chroma-Key-Filter wie in diesem Tutorial erwähnt verwendet: Ссылка

Folgendes habe ich getan:

Die erforderliche Maskenform wurde als mask.png erstellt und oben auf sample.jpg mithilfe der SVN-Maske wie folgt angewendet:

%Vor%

Ich habe ein JSFiddle hier auf die gleiche Seite gestellt: Ссылка

Mobiler Support: Das funktionierte auf iPhone, iPad, Chrome auf Android Phones einwandfrei, aber der native Browser auf der Samsung S3 hat diesen Code nicht dargestellt.

Obwohl die meisten Online-Ressourcen wie caniuse angegeben haben, dass es eine Unterstützung für Android gibt, konnte sie im nativen Browser nicht gerendert werden.

    
giri-jeedigunta 29.12.2013 14:05
quelle

Tags und Links