Animiertes, transparentes Preloader-Bild über einem einfarbigen Hintergrund
Ich möchte einen Preloader auf meiner Website zeigen, bevor der Inhalt geladen wird. Wenn ich jedoch ein animiertes Preloader-Bild mit transparentem Hintergrund wähle, sehen die Ränder sehr gezackt aus. Wie kann ich das Bild ändern oder gibt es eine Möglichkeit, einen transparenten Hintergrund für animierte Gifs zu haben?
Ich verwende die Preloader von preloader.net
1 Antwort
Die erste und wahrscheinlich einfachste Option, die Sie haben, ist spin.js . "Es erstellt dynamisch Aktivitätsindikatoren, die als auflösungsunabhängiger Ersatz für AJAX-Lade-GIFs verwendet werden können."
Wenn ein Skript keine Option ist oder Sie einen anderen Spinner haben möchten, müssen Sie eine .gif-Datei ohne Anti-Aliasing erstellen, die größer als der zu verwendende Spinner ist, und sie mit html skalieren.
Original-Spinner anti-aliased (hässliche Kante auf weißem Hintergrund):
Original Spinner ohne Kanten (ohne Anti-Aliasing, daher hat es eine pixelige Kante):
Aber wenn dieser Spinner verkleinert wird, sieht es gut aus:
Achten Sie darauf,
zu verwenden %Vor%, damit es auch in älteren IEs gut aussieht.
Tags und Links animation transparency animated-gif