From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- .../implementing_image_sprites_in_css/index.html | 50 +++++++ files/de/web/css/css_images/index.html | 145 +++++++++++++++++++++ 2 files changed, 195 insertions(+) create mode 100644 files/de/web/css/css_images/implementing_image_sprites_in_css/index.html create mode 100644 files/de/web/css/css_images/index.html (limited to 'files/de/web/css/css_images') diff --git a/files/de/web/css/css_images/implementing_image_sprites_in_css/index.html b/files/de/web/css/css_images/implementing_image_sprites_in_css/index.html new file mode 100644 index 0000000000..5551a4a59e --- /dev/null +++ b/files/de/web/css/css_images/implementing_image_sprites_in_css/index.html @@ -0,0 +1,50 @@ +--- +title: Implementing image sprites in CSS +slug: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS +tags: + - Anleitung + - CSS + - CSS Bilder + - Fortgeschrittene + - Grafik + - NeedsContent + - Sprites + - Web +translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS +--- +
{{APIRef}}
+ +

Image Sprites werden in zahlreichen Webanwendungen verwendet, wo mehrere Bilder verwendet werden. Statt jedes Bild als eine eigene Bilddatei einzubinden, ist es wesentlich speicher- und bandbreitenfreundlicher, sie als ein einzelnes Bild zu schicken, um die Anzahl an HTTP Anfragen zu verringern.

+ +

Implementierung

+ +

Angenommen, jedem Element mit der Klasse toolbtn wird ein Bild zugewiesen:

+ +
.toolbtn {
+  background: url(myfile.png);
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+}
+ +

Eine Hintergrundposition kann entweder über zwei x- und y-Werte nach der {{cssxref("url()")}} dem Hintergrund hinzugefügt werden oder als {{cssxref("background-position")}}. Als Beispiel:

+ +
#btn1 {
+  background-position: -20px 0px;
+}
+
+#btn2 {
+  background-position: -40px 0px;
+}
+ +

Dies verschiebt das Element mit der ID 'btn1' um 20 Pixel nach links und das Element mit der ID 'btn2' um 40 Pixel nach links (unter Annahme, dass diesen die Klasse toolbtn zugewiesen wurde und durch die obere CSS Regel beeinflusst werden).

+ +

Ebenso können Hover-Status erstellt werden mit:

+ +
#btn:hover {
+  background-position: <nach rechts verschobene Pixel>px <nach unten verschobene Pixel>px;
+}
+ +

Siehe auch

+ +

Voll funktionsfähige Demo bei CSS Tricks

diff --git a/files/de/web/css/css_images/index.html b/files/de/web/css/css_images/index.html new file mode 100644 index 0000000000..b34532bf2c --- /dev/null +++ b/files/de/web/css/css_images/index.html @@ -0,0 +1,145 @@ +--- +title: CSS Bilder +slug: Web/CSS/CSS_Images +tags: + - CSS + - CSS Bilder + - CSS Referenz + - Übersicht +translation_of: Web/CSS/CSS_Images +--- +
{{CSSRef}}
+ +

CSS Images ist ein CSS Modul, das definiert, welche Typen von Bildern verwendet werden können (der {{cssxref("<image>")}} Typ, der URLs, Farbverläufe und andere Arten von Bildern beinhaltet), wie diese in der Größe geändert werden und wie sie und andere ersetzte Inhalte mit den verschiedenen Layoutmodellen interagieren.

+ +

Referenz

+ +

Eigenschaften

+ +
+ +
+ +

Funktionen

+ +
+ +
+ +

Datentypen

+ +
+ +
+ +

Anleitungen

+ +
+
CSS Farbverläufe verwenden
+
Beschreibt einen bestimmten Typ von CSS Bildern, Farbverläufe, und wie diese erstellt und verwendet werden.
+
Implementierung von Bildsprites in CSS
+
Beschreibt die geläufige Methode, mehrere Bilder in einem einzigen Dokument zu gruppieren, um Downloadanfragen zu sparen und die Verfügbarkeit einer Seite zu beschleunigen.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Images')}}{{Spec2('CSS4 Images')}} 
{{SpecName('CSS3 Images')}}{{Spec2('CSS3 Images')}} 
{{SpecName('CSS3 Values', '#urls', '<url>')}}{{Spec2('CSS3 Values')}} 
{{Specname('CSS2.1', 'syndata.html#uri', '<uri>')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#url', '<url>')}}{{Spec2('CSS1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.0{{CompatGeckoDesktop("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung1.0{{CompatGeckoMobile("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
-- cgit v1.2.3-54-g00ecf