<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.
Syntax
Der <image>
-Datentyp kann durch Folgendes dargestellt werden:
- Ein Bild, das durch den
<url>
-Datentyp bezeichnet wird. - Ein
<gradient>
-Datentyp. - Ein Teil der Webseite, definiert durch die
element()
-Funktion. - Ein Bild, Bildausschnitt oder einfarbiger Bereich, definiert durch die
image()
-Funktion. - Eine Überblendung von 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. - Generiert von einem Paint Worklet mit der
paint()
-Funktion.
Beschreibung
CSS kann die folgenden Arten von Bildern verarbeiten:
- Bilder mit intrinsischen Abmessungen (einer natürlichen Größe), wie JPEG, PNG oder andere Rasterformate.
- Bilder mit mehreren intrinsischen Abmessungen, die in mehreren Versionen innerhalb einer Datei existieren, wie einige .ico-Formate. (In diesem Fall sind die intrinsischen Abmessungen diejenigen des Bildes mit der größten Fläche und dem Seitenverhältnis, das dem der umgebenden Box am ähnlichsten ist.)
- Bilder ohne intrinsische Abmessungen, aber mit einem intrinsischen Seitenverhältnis zwischen Breite und Höhe, wie SVG oder andere Vektorformate.
- Bilder mit weder intrinsischen Abmessungen noch einem intrinsischen Seitenverhältnis, wie ein CSS-Gradient.
CSS bestimmt die konkrete Größe eines Objekts anhand von (1) seinen intrinsischen Abmessungen; (2) seiner festgelegten Größe, definiert durch CSS-Eigenschaften wie width
, height
oder background-size
; und (3) seiner Standardgröße, die durch die Art der Eigenschaft, mit der das Bild verwendet wird, bestimmt 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 Randbilderbereichs des Elements |
cursor |
Die vom Browser definierte Größe, die der üblichen Cursorgröße auf dem System des Clients entspricht |
mask-image |
? |
shape-outside |
? |
mask-border-source |
? |
symbols() für @counter-style |
Diese Funktion ist risikobehaftet. Falls unterstützt, entspricht die Größe der üblichen Cursorgröße auf dem System des Clients der vom Browser definierten Größe. |
content für ein Pseudo-Element (::after /::before ) |
Ein Rechteck von 300px × 150px |
Die konkrete Größe eines Objekts wird mit folgendem Algorithmus berechnet:
- Wenn die festgelegte Größe sowohl die Breite als auch die Höhe definiert, werden diese Werte als konkrete Größe des Objekts verwendet.
- Wenn die festgelegte Größe nur die Breite oder nur die Höhe definiert, wird der fehlende Wert durch das intrinsische Seitenverhältnis bestimmt, falls vorhanden, durch die intrinsischen Abmessungen, wenn der angegebene Wert übereinstimmt, oder durch die Standardgröße des Objekts für diesen fehlenden Wert.
- Wenn die festgelegte Größe weder die Breite noch die Höhe definiert, wird die konkrete Größe des Objekts so berechnet, dass sie dem intrinsischen Seitenverhältnis des Bildes entspricht, ohne jedoch die Standardgröße des Objekts in irgendeiner Dimension zu überschreiten. Falls das Bild kein intrinsisches Seitenverhältnis besitzt, wird das intrinsische Seitenverhältnis des Objekts verwendet, auf das es angewendet wird; falls dieses Objekt keins hat, werden die fehlende Breite oder Höhe aus der Standardgröße des Objekts übernommen.
Hinweis: Nicht alle Browser unterstützen jeden Bildtyp für jede Eigenschaft. Details finden Sie im Abschnitt Browser-Kompatibilität.
Barrierefreiheit
Browser stellen keine besonderen Informationen zu Hintergrundbildern für unterstützende Technologien bereit. Dies ist insbesondere für Screenreader wichtig, da ein Screenreader deren Existenz nicht ankündigt und daher den Benutzern nichts übermittelt. Wenn das Bild Informationen enthält, die für das Verständnis des Gesamtzwecks der Seite entscheidend 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
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
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 |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
<image> | ||||||||||||
cross-fade() | ||||||||||||
element() | ||||||||||||
image-set() | ||||||||||||
paint() | ||||||||||||
Supports additional parameters to pass to the paintWorklet |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- Requires a vendor prefix or different name for use.
- Has more compatibility info.