<image>

Syntax

Der <image>-Datentyp kann durch folgende Darstellungen repräsentiert werden:

• Ein Bild, das durch den <url>-Datentyp angegeben ist
• Ein <gradient>-Datentyp
• Ein Teil der Webseite, definiert durch die element()-Funktion
• Ein Bild, Bildfragment oder einfarbige Fläche, definiert durch die image()-Funktion
• Eine Mischung aus zwei oder mehr Bildern, definiert durch die cross-fade()-Funktion
• Eine Bildauswahl basierend auf der Auflösung, definiert durch die image-set()-Funktion
• Generiert durch ein 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 ein JPEG, PNG oder ein anderes Rasterformat.
• Bilder mit mehreren intrinsischen Abmessungen, die in mehreren Versionen in einer einzigen Datei existieren, wie einige .ico-Formate. (In diesem Fall sind die intrinsischen Abmessungen des Bildes diejenigen, die in der Fläche am größten sind, und das Seitenverhältnis am ähnlichsten zum Umgebungsfeld.)
• Bilder ohne intrinsische Abmessungen, aber mit einem intrinsischen Seitenverhältnis zwischen Breite und Höhe, wie ein SVG oder anderes Vektorformat.
• Bilder mit weder intrinsischen Abmessungen noch einem intrinsischen Seitenverhältnis, wie ein CSS-Gradient.

Konkrete Größe

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

Die konkrete Größe des Objekts wird unter Verwendung des 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 unter Verwendung des intrinsischen Verhältnisses bestimmt, falls vorhanden, den intrinsischen Abmessungen, wenn der spezifizierte Wert passt, oder der 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 so berechnet, dass sie dem intrinsischen Seitenverhältnis des Bildes entspricht, jedoch ohne die Standardgröße in einer 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 auch dieses Objekt keines hat, werden die fehlende Breite oder Höhe von der Standardgröße des Objekts genommen.

Barrierefreiheit

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

• MDN Verständnis von WCAG, Leitfaden 1.1 Erklärungen
• Verständnis des Erfolgskriteriums 1.1.1 | W3C Verständnis von 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()