nicht angemeldet
Wie funktioneren Grafiken für mehrere Backgroundimages ?
Gunnar Bittersmann
Matthias Scharwies
Hallo Forum,
ich habe da eine Frage zur CSS-Gestaltung einer Hintergrundgrafik: Schon mehrfach habe ich Hintergrundgrafiken in Form von Symbolen (Pfeil rechts, Pfeil links etc.) gesehen, die mir gefielen, wenn ich diese Hintegrundgrafik anschauen wollte, dann erhielt ich meist eine ganze Grafik mit unterschiedlichen Elementen (z.B. alle Pfeile), sprich, das gesuchte Element war nur eines von vielen. Habe oben ein Beispiel angefügt (von Fancybox).
Hat diese Vorgehensweise einen Namen? Wie bindet man diese Grafik als Hintergrundgrafik ein? Und welchen Vorteil hat diese Vorgehensweise gegenüber den Gebrauch von einzelnen Grafiken?
Gruß Melanie
-
Tach!
Hat diese Vorgehensweise einen Namen?
CSS-Sprite
Wie bindet man diese Grafik als Hintergrundgrafik ein?
Mit width und/oder height den angezeigten Teil begrenzen und mit background-position verschieben.
Und welchen Vorteil hat diese Vorgehensweise gegenüber den Gebrauch von einzelnen Grafiken?
Nur ein Request statt vieler.
dedlfix.
-
Tach,
Hat diese Vorgehensweise einen Namen?
CSS Sprites
Wie bindet man diese Grafik als Hintergrundgrafik ein?
So wie andere Hintergrundgrafiken auch, allerdings muss man dann halt noch die Position innerhalb der Grafik angeben: https://wiki.selfhtml.org/wiki/Sprites
Und welchen Vorteil hat diese Vorgehensweise gegenüber den Gebrauch von einzelnen Grafiken?
Im wesentlichen weniger HTTP-Requests und damit potentiell schnellere Ladezeiten und ein automatisches Preloading.
mfg
Woodfighter-
Verstanden, Vielen Dank
[Vollzitat entfernt]
-
-
@@Melanie Hoffmeister
Hintergrundgrafiken in Form von Symbolen (Pfeil rechts, Pfeil links etc.)
Für derartige Symbole sollten meist nicht Rastergrafiken Mittel der Wahl sein, sondern Vektorgrafiken (SVG).
Bei SVG gibt es andere Möglichkeiten, alle Symbole in einer Datei zu haben:
symbol/use.LLAP 🖖
--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar)-
Servus!
Hintergrundgrafiken in Form von Symbolen (Pfeil rechts, Pfeil links etc.)
Für derartige Symbole sollten meist nicht Rastergrafiken Mittel der Wahl sein, sondern Vektorgrafiken (SVG).
Bei SVG gibt es andere Möglichkeiten, alle Symbole in einer Datei zu haben:
symbol/use.Ist auch schon angefangen: SVG/Anwendung und Praxis/Sprites
Zumindest die passenden Weblinks sind vollständig und aktuell!
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun - packen wir's an.
-