<image>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Der <image> CSS Datentyp repräsentiert ein zweidimensionales Bild.

Syntax

Der <image> Datentyp kann durch Folgendes dargestellt werden:

Ein Bild, das durch den <url> Datentyp angegeben ist
Ein <gradient> Datentyp
Ein Teil der Webseite, definiert durch die element() Funktion
Ein Bild, Bildausschnitt oder einfarbiger Bereich, definiert durch die image() Funktion
Eine Mischung aus zwei oder mehr Bildern, definiert durch die cross-fade() Funktion
Eine Auswahl von Bildern, basierend auf der Auflösung, definiert durch die image-set() Funktion.
Erzeugt durch ein Paint Worklet mit der paint() Funktion.

Beschreibung

CSS kann folgende Arten von Bildern verarbeiten:

Bilder mit intrinsischen Dimensionen (einer natürlichen Größe), wie ein JPEG, PNG, oder andere Rasterformate.
Bilder mit mehreren intrinsischen Dimensionen, die in mehreren Versionen innerhalb einer Datei existieren, wie einige .ico-Formate. (In diesem Fall sind die intrinsischen Dimensionen die des Bildes mit der größten Fläche und das Seitenverhältnis, das dem umgebenden Rahmen am ähnlichsten ist.)
Bilder ohne intrinsische Dimensionen, aber mit einem intrinsischen Seitenverhältnis zwischen Breite und Höhe, wie ein SVG oder andere Vektorformate.
Bilder mit weder intrinsischen Dimensionen noch einem intrinsischen Seitenverhältnis, wie ein CSS-Verlauf.

CSS bestimmt die konkrete Größe eines Objekts mittels (1) seiner intrinsischen Dimensionen; (2) seiner spezifizierten Größe, definiert durch CSS-Eigenschaften wie width, height, oder background-size; und (3) seiner Standardgröße, die durch die Art der Eigenschaft bestimmt wird, mit der das Bild verwendet wird:

Art des Objekts (CSS Eigenschaft)	Standardgröße des Objekts
`background-image`	Die Größe des Hintergrundpositionierungsbereichs des Elements
`list-style-image`	Die Größe eines `1em` Zeichens
`border-image-source`	Die Größe des Randbildbereichs des Elements
`cursor`	Die vom Browser definierte Größe, die der üblichen Cursorgröße auf dem System des Kunden entspricht
`mask-image`	?
`shape-outside`	?
`mask-border-source`	?
`symbols()` für @counter-style	Gefährdetes Merkmal. Falls unterstützt, die vom Browser definierte Größe, die der üblichen Cursorgröße auf dem System des Kunden entspricht
`content` für ein Pseudo-Element (`::after`/`::before`)	Ein 300px × 150px Rechteck

Die konkrete Größe des Objekts wird mit folgendem Algorithmus berechnet:

Falls die spezifizierte Größe sowohl Breite als auch Höhe definiert, werden diese Werte als konkrete Größe des Objekts verwendet.
Falls die spezifizierte Größe nur die Breite oder nur die Höhe definiert, wird der fehlende Wert mittels des intrinsischen Verhältnisses bestimmt, falls vorhanden, den intrinsischen Dimensionen, falls die spezifizierte Größe übereinstimmt, oder der Standardgröße des Objekts für diesen fehlenden Wert.
Falls die spezifizierte Größe weder Breite noch Höhe definiert, wird die konkrete Größe des Objekts so berechnet, dass sie dem intrinsischen Seitenverhältnis des Bildes entspricht, ohne die Standardgröße des Objekts in irgendeiner Dimension zu überschreiten. Falls das Bild kein intrinsisches Seitenverhältnis hat, wird das intrinsische Seitenverhältnis des Objekts verwendet, auf das es angewendet wird; falls dieses Objekt keines hat, werden die fehlenden Breite oder Höhe aus der Standardgröße des Objekts übernommen.

Hinweis: Nicht alle Browser unterstützen jeden Bildtyp in jeder Eigenschaft. Siehe den Browser-Kompatibilitätsabschnitt für Details.

Barrierefreiheit

Browser bieten keine besonderen Informationen zu Hintergrundbildern für unterstützende Technologien. Dies ist vor allem für Bildschirmleser wichtig, da ein Bildschirmleser seine Anwesenheit nicht ankündigt und somit nichts an seine Benutzer vermittelt. Falls das Bild Informationen enthält, die entscheidend für das Verständnis des allgemeinen Zwecks der Seite sind, ist es besser, es semantisch im Dokument zu beschreiben.

Formale Syntax

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Beispiele

Gültige Bilder

css

url(test.jpg)               /* A <url>, as long as test.jpg is an actual image */
linear-gradient(blue, red)  /* A <gradient> */
element(#real-id)            /* A part of the webpage, referenced with the element() function,
                               if "real-id" is an existing ID on the page */
image(ltr 'arrow.png#xywh=0,0,16,16', red)
                            /* A section 16x16 section of <url>, starting from the top, left of the original
                               image as long as arrow.png is a supported image, otherwise a solid
                               red swatch. If language is rtl, the image will be horizontally flipped. */
cross-fade(20% url(twenty.png), url(eighty.png))
                            /* cross faded images, with twenty being 20% opaque
                               and eighty being 80% opaque. */
image-set('test.jpg' 1x, 'test-2x.jpg' 2x)
                            /* a selection of images with varying resolutions */

Ungültige Bilder

css

no-url.jpg           /* An image file must be defined using the url() function. */
url(report.pdf)      /* A file pointed to by the url() function must be an image. */
element(#fakeid)     /* An element ID must be an existing ID on the page. */
image(z.jpg#xy=0,0)  /* The spatial fragment must be written in the format of xywh=#,#,#,# */
image-set('cat.jpg' 1x, 'dog.jpg' 1x) /* every image in an image set must have a different resolution */

Spezifikationen

Specification
CSS Images Module Level 3 # image-values