<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 Image Values and Replaced Content 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

Merkmal Firefox (Gecko) Chrome Internet Explorer Opera Safari
<uri> (Ja) (Ja) (Ja) (Ja) (Ja)
<gradient> (Ja)
limited to background-image & background-moz
(Ja)-webkit IE 10-ms (Ja)-o (Ja)-webkit
element() 4.0 (2.0) limited to background-image & background-moz ? ? ? ?
Merkmal Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
<uri> (Ja) (Ja) (Ja) (Ja) (Ja)
<gradient> (Ja)
limited to background-image & background-moz
? ? ? ?
element() 4.0 (2.0) limited to background-image & background-moz ? ? ? ?

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: slayslot, mrstork, fscholz, Sebastianz
 Zuletzt aktualisiert von: slayslot,