<image>

Übersicht

Der <image> CSS Datentyp repräsentiert ein 2D Bild. Es gibt zwei Arten von Bildern in CSS: einfache statische Bilder, die meist über einen URL referenziert werden, und dynamisch generierte Bilder wie Farbverläufe oder Abbildungen von Teilen der HTML Struktur.

CSS kann verschiedene Arten von Bildern verarbeiten:

  • Bilder mit inneren Maßen, d. h. einer natürlichen Größe, wie bei einem JPEG Bild, das feste Maße hat.
  • Bilder mit mehreren inneren Maßen, die in mehreren Versionen innerhalb der Datei existieren, wie bei einigen ICO Formaten. In diesem Fall entspricht das innere Maß dem flächenmäßig größten Bild mit dem Seitenverhältnis, das dem der beinhaltenden Box am nächsten kommt.
  • Bilder ohne innerem Maß, die jedoch ein inneres Seitenverhältnis zwischen ihrer Breite und Höhe haben, wie beispielsweise einige Vektorbilder im SVG Format.
  • Bilder ohne innere Maße noch innerem Seitenverhältnis, wie beispielsweise CSS Farbverläufen.

CSS bestimmt die konkrete Objektgröße anhand dieser inneren Maße, der angegebenen Größe definiert durch CSS Eigenschaften wie width, height oder background-size und der Standard Objektgröße, die durch die Art der Eigenschaft definiert wird, in der das Bild verwendet wird:

Objektart Standard Objektgröße
background-image Die Größe des Hintergrund Positionierungsbereichs des Elements
list-style-image Die Größe eines Zeichens in 1em
border-image Die Größe des Randbildbereichs des Elements
cursor Eine durch den Browser definierte Größe, die der normalen Größe eines Mauszeigers auf dem benutzten System entspricht
Ersetzter Inhalt wie die Kombination der CSS Eigenschaft content mit den CSS Pseudoelementen ::after und ::before Ein 300px × 150px Rechteck

Die konkrete Objektgröße wird mit Hilfe des folgenden Algorithmus berechnet:

  • Falls die angegebene Größe sowohl Breite als auch Höhe definiert, werden diese Werte als die konkrete Objektgröße verwendet.
  • Falls die angegebene Größe einen der beiden Werte für Breite und Höhe definiert, wird der fehlende Wert durch das innere Seitenverhältnis bestimmt, sofern vorhanden, die inneren Maße, falls der angegebene Wert passt, oder es wird die Standard Objektgröße für den fehlenden Wert verwendet.
  • Falls die angegebene Größe weder Breite noch Höhe definiert, wird die konkrete Objektgröße so berechnet, dass sie dem inneren Seitenverhältnis der Bilder entspricht, jedoch die Standard Objektgröße in keinem Maß übersteigt. Falls das Bild kein inneres Seitenverhältnis hat, wird das innere Seitenverhältnis des Objekts verwendet, dem es zugewiesen ist; falls das Objekt keines hat, wird die fehlende Breite oder Höhe von der Standard Objektgröße herangezogen.

Bilder können von diversen CSS Eigenschaften verwendet werden, wie background-image, border-image, content, list-style-image oder cursor.

Hinweis: Nicht alle Browser unterstützen alle Arten von Bildern in allen Eigenschaften. Der Unterpunkt Browser Kompatibilität enhält hierzu eine detaillierte Liste.

Syntax

Ein <image> CSS Datentyp kann die folgenden Bilder repräsentieren:

  • Ein Bild, dass durch einen <uri> CSS Datentyp und die url() Funktion angegeben wird
  • Einen CSS <gradient>;
  • Einen Teil einer Seite, der durch die element() Funktion definiert wird.

Beispiele

Dies sind gültige Bildwerte:

url(test.jpg)                          Die url() Funktion, sofern test.jpg ein Bild ist
linear-gradient(to bottom, blue, red)  Ein <gradient>
element(#colonne3)                     Ein Teil einer Seite, der durch die element() Funktion referenziert wird,,
                                       sofern 'colonne3' eine existierende CSS ID auf der Seite darstellt.

Dies sind ungültige Bildwerte:

cervin.jpg                             Eine Bilddatei muss durch die url() Funktion angegeben werden.
url(report.pdf)                        Die Datei, die über die url() Funktion angesprochen wird, muss ein Bild sein.
element(#fakeid)                       Falls 'fakeid' keine in der Seite existierende CSS ID darstellt.

Spezifikationen

Spezifikation Status Kommentar
CSS Images Module Level 3
Die Definition von 'image()' in dieser Spezifikation.
Anwärter Empfehlung Vor CSS3 gab es keinen explizit definierten <image> Datentyp. Bilder konnten nur durch die url() Funktion definiert werden.

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
<image>Chrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 10Opera Vollständige Unterstützung 2Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung 1Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 11Safari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung 1.0
cross-fade()
Experimentell
Chrome Vollständige Unterstützung 17
Mit Präfix Hinweise
Vollständige Unterstützung 17
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Hinweise Supports the original dual-image with percentage implementation only.
Edge Keine Unterstützung NeinFirefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera Vollständige Unterstützung 15
Mit Präfix Hinweise
Vollständige Unterstützung 15
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Hinweise Supports the original dual-image with percentage implementation only.
Safari Vollständige Unterstützung 10
Hinweise
Vollständige Unterstützung 10
Hinweise
Hinweise Supports the original dual-image with percentage implementation only.
Vollständige Unterstützung 5.1
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Hinweise Supports the original dual-image with percentage implementation only.
WebView Android Vollständige Unterstützung ≤37
Mit Präfix Hinweise
Vollständige Unterstützung ≤37
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Hinweise Supports the original dual-image with percentage implementation only.
Chrome Android Vollständige Unterstützung 18
Mit Präfix Hinweise
Vollständige Unterstützung 18
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Hinweise Supports the original dual-image with percentage implementation only.
Firefox Android Keine Unterstützung NeinOpera Android Vollständige Unterstützung 14
Mit Präfix Hinweise
Vollständige Unterstützung 14
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Hinweise Supports the original dual-image with percentage implementation only.
Safari iOS Vollständige Unterstützung 9.3
Hinweise
Vollständige Unterstützung 9.3
Hinweise
Hinweise Support for the original dual-image with percentage implementation only.
Vollständige Unterstützung 5
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Hinweise Supports the original dual-image with percentage implementation only.
Samsung Internet Android Vollständige Unterstützung 1.0
Mit Präfix Hinweise
Vollständige Unterstützung 1.0
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Hinweise Support for the original dual-image with percentage implementation only.
element()
Experimentell
Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Vollständige Unterstützung 57
Mit Präfix
Vollständige Unterstützung 57
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Keine Unterstützung 29 — 57
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Hinweise -moz-element() is limited to background-image, background, border-image and border-image-source.
Keine Unterstützung 4 — 29
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Hinweise -moz-element() is limited to background-image and background.
IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 60
Mit Präfix
Vollständige Unterstützung 60
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Keine Unterstützung 29 — 60
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Hinweise -moz-element() is limited to background-image, background, border-image and border-image-source.
Keine Unterstützung 4 — 29
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -moz-
Hinweise -moz-element() is limited to background-image and background.
Opera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
<gradient>Chrome Vollständige Unterstützung 26
Vollständige Unterstützung 26
Vollständige Unterstützung 10
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Vollständige Unterstützung 12
Mit Präfix
Vollständige Unterstützung 12
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -ms-
Firefox Vollständige Unterstützung 3.6
Hinweise
Vollständige Unterstützung 3.6
Hinweise
Hinweise Gradients are limited to background-image, border-image, and mask-image.
IE Vollständige Unterstützung 10
Mit Präfix
Vollständige Unterstützung 10
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -ms-
Opera Vollständige Unterstützung 12.1
Vollständige Unterstützung 12.1
Keine Unterstützung 11 — 15
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -o-
Vollständige Unterstützung 15
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Safari Vollständige Unterstützung 6.1
Vollständige Unterstützung 6.1
Vollständige Unterstützung 5.1
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
WebView Android Vollständige Unterstützung ≤37
Vollständige Unterstützung ≤37
Vollständige Unterstützung ≤37
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Chrome Android Vollständige Unterstützung 26
Vollständige Unterstützung 26
Vollständige Unterstützung 18
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Android Vollständige Unterstützung 4
Hinweise
Vollständige Unterstützung 4
Hinweise
Hinweise Gradients are limited to background-image, border-image, and mask-image.
Opera Android Vollständige Unterstützung 12.1
Vollständige Unterstützung 12.1
Keine Unterstützung 11 — 14
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -o-
Vollständige Unterstützung 14
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Safari iOS Vollständige Unterstützung 7
Vollständige Unterstützung 7
Vollständige Unterstützung 6
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Samsung Internet Android Vollständige Unterstützung 1.5
Vollständige Unterstützung 1.5
Vollständige Unterstützung 1.0
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
image()
Experimentell
Chrome Keine Unterstützung NeinEdge Keine Unterstützung NeinFirefox Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise The -moz-image-rect() function supports fragments as of Firefox 4.
IE Keine Unterstützung NeinOpera Keine Unterstützung NeinSafari Keine Unterstützung NeinWebView Android Keine Unterstützung NeinChrome Android Keine Unterstützung NeinFirefox Android Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise The -moz-image-rect() function supports fragments as of Firefox 4.
Opera Android Keine Unterstützung NeinSafari iOS Keine Unterstützung NeinSamsung Internet Android Keine Unterstützung Nein
image-set()
Experimentell
Chrome Vollständige Unterstützung 21
Mit Präfix
Vollständige Unterstützung 21
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Edge Keine Unterstützung NeinFirefox Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise See bug 1107646.
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 15
Mit Präfix
Vollständige Unterstützung 15
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Safari Teilweise Unterstützung 6
Mit Präfix Hinweise
Teilweise Unterstützung 6
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Hinweise Support for url images only and x is the only supported resolution unit. See bug 160934.
WebView Android Vollständige Unterstützung 4.4
Mit Präfix
Vollständige Unterstützung 4.4
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Chrome Android Vollständige Unterstützung 25
Mit Präfix
Vollständige Unterstützung 25
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Firefox Android Keine Unterstützung Nein
Hinweise
Keine Unterstützung Nein
Hinweise
Hinweise See bug 1107646.
Opera Android Vollständige Unterstützung 14
Mit Präfix
Vollständige Unterstützung 14
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Safari iOS Teilweise Unterstützung 6
Mit Präfix Hinweise
Teilweise Unterstützung 6
Mit Präfix Hinweise
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
Hinweise Support for url images only and x is the only supported resolution unit. See bug 160934.
Samsung Internet Android Vollständige Unterstützung 1.5
Mit Präfix
Vollständige Unterstützung 1.5
Mit Präfix
Mit Präfix Benötigt das Herstellerpräfix: -webkit-
paint()
Experimentell
Chrome Vollständige Unterstützung 65Edge Keine Unterstützung NeinFirefox Keine Unterstützung NeinIE Keine Unterstützung NeinOpera Vollständige Unterstützung 52Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 65Chrome Android Vollständige Unterstützung 65Firefox Android Keine Unterstützung NeinOpera Android Vollständige Unterstützung 47Safari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung 9.2

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Teilweise Unterstützung  
Teilweise Unterstützung
Keine Unterstützung  
Keine Unterstützung
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.

Siehe auch