Der<image>CSSDatentyp repräsentiert ein zweidimensionales Bild.

Syntax

Der<image> Datentyp kann auf folgende Weise dargestellt werden:

• Ein Bild, das durch den<url> Datentyp angegeben wird
• Ein<gradient> Datentyp
• Ein Teil der Webseite, definiert durch dieelement() Funktion
• Ein Bild, Bildfragment oder eine einfarbige Fläche, definiert durch dieimage() Funktion
• Eine Mischung aus zwei oder mehr Bildern, definiert durch diecross-fade() Funktion
• Eine Auswahl an Bildern, basierend auf der Auflösung, definiert durch dieimage-set() Funktion.
• Generiert durch einenPaint-Worklet mit derpaint() Funktion.

Beschreibung

CSS kann folgende Arten von Bildern verarbeiten:

• Bilder mitintrinsischen Abmessungen (einer natürlichen Größe), wie ein JPEG, PNG oder ein anderesRasterformat.
• Bilder mitmehreren intrinsischen Abmessungen, die in mehreren Versionen innerhalb einer einzigen Datei existieren, wie einige .ico-Formate. (In diesem Fall sind die intrinsischen Abmessungen diejenigen des flächenmäßig größten Bildes und dasSeitenverhältnis am ähnlichsten zu dem des umgebenden Kastens.)
• Bilder ohne intrinsische Abmessungen, aber mit einemintrinsischen Seitenverhältnis zwischen Breite und Höhe, wie ein SVG oder ein anderesVektorformat.
• Bilder mitweder intrinsischen Abmessungen noch einem intrinsischen Seitenverhältnis, wie ein CSS-Gradient.

CSS bestimmt diekonkrete Größe eines Objekts unter Berücksichtigung von (1) seinenintrinsischen Abmessungen; (2) seinerspezifizierten Größe, definiert durch CSS-Eigenschaften wiewidth,height, oderbackground-size; und (3) seinerStandardgröße, die von der Art der Eigenschaft bestimmt wird, mit der das Bild verwendet wird:

Die konkrete Objektgröße wird unter Verwendung des folgenden Algorithmus berechnet:

• Wenn die spezifizierte Größesowohl die Breite als auch die Höhe definiert, werden diese Werte als konkrete Objektgröße verwendet.
• Wenn die spezifizierte Größenur die Breite oder nur die Höhe definiert, wird der fehlende Wert unter Verwendung des intrinsischen Verhältnisses, wenn vorhanden, der intrinsischen Abmessungen, wenn der spezifizierte Wert übereinstimmt, oder der Standardgröße des Objekts für diesen fehlenden Wert bestimmt.
• Wenn die spezifizierte Größeweder die Breite noch die Höhe definiert, wird die konkrete Objektgröße so berechnet, dass sie dem intrinsischen Seitenverhältnis des Bildes entspricht, ohne die Standardgröße des Objekts in irgendeiner Dimension zu überschreiten. Hat das Bild kein intrinsisches Seitenverhältnis, wird das intrinsische Seitenverhältnis des Objekts, auf das es angewendet wird, verwendet; hat dieses Objekt keines, werden die fehlende Breite oder Höhe aus der Standardgröße des Objekts genommen.

Barrierefreiheit

Browser bieten keine speziellen Informationen zu Hintergrundbildern für unterstützende Technologien. Dies ist vor allem für Screenreader wichtig, da ein Screenreader deren Vorhandensein nicht ankündigt und daher den Nutzern nichts vermittelt. Wenn das Bild Informationen enthält, die zum Verständnis des Gesamtzwecks der Seite entscheidend sind, ist es besser, es semantisch im Dokument zu beschreiben.

• MDN Verständnis WCAG, Richtlinien 1.1 Erklärungen
• Verständnis des Erfolgskriteriums 1.1.1 | W3C Verständnis WCAG 2.0

Formale Syntax

<image> =
<url>|
<image()>|
<image-set()>|
<cross-fade()>|
<element()>|
<gradient>

<image()> =
image(<image-tags>?[<image-src>? ,<color>?]!)

<image-set()> =
image-set(<image-set-option>#)

<cross-fade()> =
cross-fade(<cf-image>#)

<element()> =
element(<id-selector>)

<image-tags> =
ltr|
rtl

<image-src> =
<url>|
<string>

<image-set-option> =
[<image>|<string>][<resolution>||type(<string>)]?

<cf-image> =
[<image>|<color>]&&
<percentage [0,100]>?

<id-selector> =
<hash-token>

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

Browser-Kompatibilität

Siehe auch

• <gradient>
• element()
• image()
• image-set()
• cross-fade()