<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:

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.

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

Browser Kompatibilität

Siehe auch

• Farbverläufe in CSS, <gradient>, linear-gradient(), radial-gradient(), repeating-linear-gradient(), repeating-radial-gradient();
• element();