<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 mit einem der folgenden Elemente 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, Bildfragment oder einfarbiger Farbabschnitt, 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
  • Generiert durch einen paint worklet mit der paint() Funktion.

Beschreibung

CSS kann folgende Arten von Bildern verarbeiten:

  • Bilder mit intrinsischen Dimensionen (eine natürliche Größe), wie JPEG, PNG oder andere Rasterformate.
  • Bilder mit mehreren intrinsischen Dimensionen, die in mehreren Versionen innerhalb einer einzigen Datei existieren, wie einige .ico-Formate. (In diesem Fall sind die intrinsischen Dimensionen die des bildflächengrößten Bilds und das Seitenverhältnis am ähnlichsten der umgebenden Box.)
  • Bilder ohne intrinsische Dimensionen, aber mit einem intrinsischen Seitenverhältnis zwischen Breite und Höhe, wie SVG oder andere Vektorformate.
  • Bilder mit weder intrinsischen Dimensionen noch einem intrinsischen Seitenverhältnis, wie ein CSS-Gradient.

CSS bestimmt die konkrete Größe eines Objekts durch (1) seine intrinsischen Dimensionen; (2) seine spezifizierte Größe, definiert durch CSS-Eigenschaften wie width, height oder background-size; und (3) seine Standardgröße, bestimmt durch die Art der Eigenschaft, 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 Rahmenbildbereichs des Elements
cursor Die vom Browser definierte Größe, die der üblichen Zeigergröße auf dem System des Clients entspricht
mask-image ?
shape-outside ?
mask-border-source ?
symbols() for @counter-style Gefährdete Funktion. Wenn unterstützt, die vom Browser definierte Größe, die der üblichen Zeigergröße auf dem System des Clients entspricht
content für ein Pseudoelement (::after/::before) Ein Rechteck von 300px × 150px

Die konkrete Größe eines Objekts wird durch den folgenden Algorithmus berechnet:

  • Wenn die spezifizierte Größe sowohl die Breite als auch die Höhe definiert, werden diese Werte als konkrete Größe des Objekts verwendet.
  • Wenn die spezifizierte Größe nur die Breite oder nur die Höhe definiert, wird der fehlende Wert durch das intrinsische Verhältnis bestimmt, falls vorhanden, die intrinsischen Dimensionen, wenn der spezifizierte Wert übereinstimmt, oder die Standardgröße des Objekts für diesen fehlenden Wert.
  • Wenn die spezifizierte 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 Bilds entspricht, aber ohne die Standardgröße des Objekts in irgendeiner Dimension zu überschreiten. Wenn das Bild kein intrinsisches Seitenverhältnis hat, wird das intrinsische Seitenverhältnis des Objekts verwendet, auf das es angewendet wird; falls auch dieses keines hat, werden die fehlende Breite oder Höhe aus der Standardgröße des Objekts entnommen.

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

Barrierefreiheit

Browser bieten keine speziellen Informationen über Hintergrundbilder für unterstützende Technologien an. Dies ist besonders für Screenreader wichtig, da ein Screenreader dessen Vorhandensein nicht ankündigt und daher den Benutzern nichts vermittelt. Wenn das Bild Informationen enthält, die entscheidend für das Verständnis des Gesamtzwecks 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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch