<image>

Syntax

Der <image>-Datentyp kann auf eine der folgenden Arten dargestellt werden:

• Ein Bild, das durch den <url> Datentyp angegeben wird
• Ein <gradient> Datentyp
• Ein Teil der Webseite, definiert durch die element() Funktion
• Ein Bild, Bildabschnitt oder eine feste Farbfläche, 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 gewählt, 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 Maßen (einer natürlichen Größe), wie JPEG, PNG oder andere Rasterformate.
• Bilder mit mehreren intrinsischen Maßen, die in mehreren Versionen innerhalb einer einzigen Datei vorliegen, wie einige .ico-Formate. (In diesem Fall sind die intrinsischen Maße die des Bildes mit der größten Fläche und das Seitenverhältnis, das dem umgebenden Kasten am ähnlichsten ist.)
• Bilder ohne intrinsische Maße, aber mit einem intrinsischen Seitenverhältnis zwischen Breite und Höhe, wie SVG oder andere Vektorformate.
• Bilder ohne intrinsische Maße und ohne intrinsisches Seitenverhältnis, wie ein CSS-Gradient.

CSS bestimmt die konkrete Größe eines Objekts unter Verwendung von (1) seinen intrinsischen Maßen; (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 Objektgröße wird nach dem folgenden Algorithmus berechnet:

• Wenn die spezifizierte Größe sowohl die Breite als auch die Höhe definiert, werden diese Werte als konkrete Objektgröße verwendet.
• Wenn die spezifizierte Größe nur die Breite oder nur die Höhe definiert, wird der fehlende Wert anhand des intrinsischen Verhältnisses bestimmt, sofern vorhanden, der intrinsischen Maße, wenn der spezifizierte Wert übereinstimmt, 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 Objektgröße 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 verwendet, auf das es zutrifft; wenn dieses Objekt keines hat, werden die fehlende Breite oder Höhe aus der Standardgröße des Objekts genommen.

Barrierefreiheit

Browser stellen assistiven Technologien keine speziellen Informationen zu Hintergrundbildern bereit. Das ist vor allem für Bildschirmleser wichtig, da ein Bildschirmleser seine Anwesenheit nicht ankündigt und daher den Nutzern nichts vermittelt. Wenn das Bild Informationen enthält, die für das Verständnis des gesamten Zwecks der Seite entscheidend sind, ist es besser, diese semantisch im Dokument zu beschreiben.

• MDN Understanding WCAG, Guideline 1.1 explanations
• 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()