image()

image-tags Optional

Die Direktionalität des Bildes, entweder ltr für links-nach-rechts oder rtl für rechts-nach-links.

image-src Optional

Null oder mehr <url> oder <string>, die die Bildquellen angeben, mit optionalen Bildfragment-Identifikatoren.

color Optional

Eine Farbe, die eine solide Hintergrundfarbe angibt, die als Fallback verwendet wird, wenn keine image-src gefunden, unterstützt oder deklariert wird.

Der erste, optionale Parameter der image()-Notation ist die Direktionalität des Bildes. Wenn er enthalten ist und das Bild auf einem Element mit entgegengesetzter Direktionalität verwendet wird, wird das Bild in horizontalen Schreibrichtungen horizontal gespiegelt. Wenn die Direktionalität weggelassen wird, wird das Bild nicht gespiegelt, wenn die Sprachrichtung geändert wird.

Ein entscheidender Unterschied zwischen url() und image() ist die Möglichkeit, einen Medienfragment-Identifier zu einem Bildquellpfad hinzuzufügen — einen Startpunkt entlang der x- und y-Achse sowie eine Breite und Höhe — um nur einen Teil des Quellbildes anzuzeigen. Der im Parameter definierte Abschnitt des Bildes wird zu einem eigenständigen Bild. Die Syntax sieht folgendermaßen aus:

background-image: image("my-image.webp#xywh=0,20,40,60");

Das Hintergrundbild des Elements wird der Teil des Bildes myImage.webp sein, der bei der Koordinate 0px, 20px (die obere linke Ecke) beginnt und 40px breit und 60px hoch ist.

Die #xywh=#,#,#,#-Medienfragment-Syntax benötigt vier durch Kommas getrennte numerische Werte. Die ersten beiden stellen die X- und Y-Koordinaten für den Startpunkt des zu erstellenden Kastens dar. Der dritte Wert ist die Breite des Kastens und der letzte Wert die Höhe. Standardmäßig sind dies Pixelwerte. Die Definition der räumlichen Dimensionen in der Medienspezifikation zeigt an, dass auch Prozentsätze unterstützt werden:

xywh=160,120,320,240        /* results in a 320x240 image at x=160 and y=120 */
xywh=pixel:160,120,320,240  /* results in a 320x240 image at x=160 and y=120 */
xywh=percent:25,25,50,50    /* results in a 50%x50% image at x=25% and y=25% */

Die Bildfragmente können ebenfalls in der url()-Notation verwendet werden. Die #xywh=#,#,#,#-Medienfragment-Syntax ist 'abwärtskompatibel', da ein Medienfragment ignoriert wird, wenn es nicht verstanden wird, und der Quellaufruf bei Verwendung von url() nicht unterbrochen wird. Wenn der Browser die Medienfragment-Notation nicht versteht, ignoriert er das Fragment und zeigt das gesamte Bild an.

Browser, die image() verstehen, verstehen auch die Fragmentnotation. Dementsprechend, wenn das Fragment innerhalb von image() nicht verstanden wird, wird das Bild als ungültig betrachtet.

Wenn in image() zusammen mit Ihren Bildquellen eine Farbe angegeben wird, dient sie als Fallback, falls die Bilder ungültig sind und nicht angezeigt werden. In solchen Fällen rendert die image()-Funktion, als ob kein Bild enthalten wäre, und erzeugt ein einfarbiges Bild. Ein Anwendungsfall könnte ein dunkles Bild sein, das als Hintergrund für weißen Text verwendet wird. Eine dunkle Hintergrundfarbe kann für die Lesbarkeit des Vordergrundtextes erforderlich sein, falls das Bild nicht gerendert wird.

Das Weglassen von Bildquellen bei gleichzeitiger Angabe einer Farbe ist gültig und erstellt ein Farbfeld. Im Gegensatz zur Deklaration einer background-color, die unter oder hinter allen Hintergrundbildern platziert wird, kann dies verwendet werden, um (allgemein semitransparente) Farben über andere Bilder zu legen.

Die Größe des Farbfeldes kann mit der background-size-Eigenschaft festgelegt werden. Dies unterscheidet sich von der background-color, die eine Farbe setzt, um das gesamte Element abzudecken. Sowohl image(color) als auch background-color-Platzierungen werden durch die background-clip- und background-origin-Eigenschaften beeinflusst.

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

<image-tags> = 
  ltr  |
  rtl  

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

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

Browser bieten keine speziellen Informationen über Hintergrundbilder für unterstützende Technologien an. Dies ist vor allem für Screenreader wichtig, da ein Screenreader seine Anwesenheit nicht ansagt und daher nichts an seine Benutzer übermittelt. Wenn das Bild Informationen enthält, die entscheidend für das Verständnis des Gesamtsinns der Seite sind, ist es besser, es semantisch im Dokument zu beschreiben.

• MDN Verständnis von WCAG, Erläuterungen zur Richtlinie 1.1
• Verständnis des Erfolgskriteriums 1.1.1 | W3C Verständnis von WCAG 2.0

Diese Funktion kann helfen, die Barrierefreiheit zu verbessern, indem eine Ausweichfarbe bereitgestellt wird, wenn ein Bild nicht geladen wird. Während dies auch durch die Angabe einer Hintergrundfarbe für jedes Hintergrundbild erreicht werden kann und sollte, ermöglicht es die CSS-image()-Funktion, nur Hintergrundfarben hinzuzufügen, falls ein Bild nicht geladen wird, was bedeutet, dass Sie eine Ausweichfarbe hinzufügen können, falls ein transparentes PNG/GIF/WebP nicht geladen wird.

<ul>
  <li dir="ltr">Bullet is a right facing arrow on the left</li>
  <li dir="rtl">Bullet is the same arrow, flipped to point left.</li>
</ul>

ul {
  list-style-image: image(ltr "rightarrow.png");
}

Bei den von links-nach-rechts Listeneinträgen — denjenigen, die dir="ltr" auf dem Element selbst gesetzt haben, oder die die Direktionalität von einem Vorfahren oder Standardwert für die Seite erben — wird das Bild unverändert verwendet. Listeneinträge mit dir="rtl" auf dem <li> gesetzt oder die die rechts-nach-links-Richtung von einem Vorfahren erben, wie Dokumente, die auf Arabisch oder Hebräisch gesetzt sind, zeigen das Aufzählungszeichen auf der rechten Seite, horizontal gespiegelt, als ob transform: scaleX(-1) gesetzt wäre. Der Text wird ebenfalls von links-nach-rechts angezeigt.

<div class="box">Hover over me. What cursor do you see?</div>

.box:hover {
  cursor: image("sprite.png#xywh=32,64,16,16");
}

Wenn der Benutzer über das Feld fährt, ändert sich der Cursor und zeigt den 16x16 px großen Abschnitt des Sprite-Bildes an, beginnend bei x=32 und y=64.

.quarter-logo {
  height: 200px;
  width: 200px;
  border: 1px solid;
}

.quarter-logo {
  background-image: image(rgb(0 0 0 / 25%)), url("firefox.png");
  background-size: 25%;
  background-repeat: no-repeat;
}

<div class="quarter-logo">
  If supported, a quarter of this div has a darkened logo
</div>

Das obige setzt eine semitransparente schwarze Maske über das Firefox-Logo-Hintergrundbild. Hätten wir stattdessen die background-color-Eigenschaft verwendet, wäre die Farbe hinter dem Logo-Bild erschienen, anstatt darüber. Außerdem hätte der gesamte Container dieselbe Hintergrundfarbe gehabt. Da wir image() zusammen mit der background-size-Eigenschaft verwendet haben (und das Wiederholen des Bildes mit der background-repeat-Eigenschaft verhindert haben), wird das Farbfeld nur ein Viertel des Containers abdecken.

Es gibt keinen Browser, der dieses Feature implementiert.

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