<image>

Syntax

Der <image>-Datentyp kann durch eines der folgenden dargestellt werden:

• Ein Bild, gekennzeichnet durch den <url>-Datentyp
• Ein <gradient>-Datentyp
• Ein Teil der Webseite, definiert durch die element()-Funktion
• Ein Bild, Bildfragment oder solider Farbfleck, definiert durch die image()-Funktion
• Eine Mischung aus zwei oder mehr Bildern, definiert durch die cross-fade()-Funktion.
• Eine Auswahl von Bildern, die basierend auf der Auflösung gewählt werden, 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 Dimensionen (eine natürliche Größe), wie ein JPEG, PNG oder andere Rasterformate.
• Bilder mit mehrfachen intrinsischen Dimensionen, die in mehreren Versionen in einer einzigen Datei existieren, wie einige .ico-Formate. (In diesem Fall sind die intrinsischen Dimensionen diejenigen des Bildes mit der größten Fläche und dem am meisten dem umgebenden Kasten ähnlichen Seitenverhältnis.)
• Bilder ohne intrinsische Dimensionen, aber mit einem intrinsischen Seitenverhältnis zwischen Breite und Höhe, wie ein SVG oder andere Vektorformate.
• Bilder ohne intrinsische Dimensionen und ohne ein intrinsisches Seitenverhältnis, wie ein CSS-Gradient.

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

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

• Wenn die definierte Größe sowohl die Breite als auch die Höhe festlegt, werden diese Werte als konkrete Größe des Objekts verwendet.
• Wenn die definierte Größe nur die Breite oder nur die Höhe festlegt, wird der fehlende Wert anhand des intrinsischen Verhältnisses, falls vorhanden, der intrinsischen Dimensionen, wenn der definierte Wert übereinstimmt, oder der Standardgröße des Objekts für diesen fehlenden Wert bestimmt.
• Wenn die definierte Größe weder die Breite noch die Höhe festlegt, 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 einer Dimension zu überschreiten. Wenn das Bild kein intrinsisches Seitenverhältnis hat, wird das intrinsische Seitenverhältnis des Objekts, auf das es angewendet wird, verwendet; wenn dieses Objekt keines hat, werden die fehlende Breite oder Höhe aus der Standardgröße des Objekts genommen.

Barrierefreiheit

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

• MDN Verständnis WCAG, Richtlinie 1.1 Erklärungen
• Understanding Success Criterion 1.1.1 | W3C Understanding 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()