image() CSS-Funktion

Syntax

/* Basic usage */
image("image1.jpg");
image(url("image2.jpg"));

/* Bidi-sensitive Images */
image(ltr "image1.jpg");
image(rtl "image1.jpg");

/* Image Fallbacks */
image("image1.jpg", black);

/* Image Fragments */
image("image1.jpg#xywh=40,0,20,20");

/* Solid-color Images */
image(rgb(0 0 255 / 0.5)), url("bg-image.png");

Werte

image-tags Optional

Die Richtung der Grafik, entweder ltr für Links-nach-Rechts oder rtl für Rechts-nach-Links.

image-src Optional

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

color Optional

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

Bidirektionale Bewusstheit

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

Bildfragmente

Ein wesentlicher Unterschied zwischen url() und image() ist die Möglichkeit, einen Medienfragment-Identifikator hinzuzufügen — einen Startpunkt entlang der x- und y-Achse, zusammen mit einer Breite und Höhe — auf die Bildquelle, um nur einen Abschnitt des Quelldokuments anzuzeigen. Der im Parameter definierte Teil 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 (oben links) beginnt und 40px breit und 60px hoch ist.

Die #xywh=#,#,#,# Medienfragment-Syntax nimmt vier durch Komma getrennte numerische Werte an. Die ersten beiden stellen die X- und Y-Koordinaten für den Anfangspunkt 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 Dimension in der Medienspezifikation gibt 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 Syntax des Medienfragments #xywh=#,#,#,# ist rückwärtskompatibel, da ein Medienfragment ignoriert wird, wenn es nicht verstanden wird, und den Quellaufruf nicht unterbricht, wenn es mit url() verwendet 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 Fragment-Notation. Daher wird das Bild als ungültig betrachtet, wenn das Fragment innerhalb von image() nicht verstanden wird.

Farb-Fallback

Wenn in image() neben Ihren Bildquellen eine Farbe angegeben wird, dient sie als Fallback, wenn die Bilder ungültig sind und nicht angezeigt werden. In solchen Fällen wird die image()-Funktion so gerendert, als ob kein Bild enthalten wäre und ein Volltonbild erzeugt. Als Anwendungsfall kann eine dunkle Grafik als Hintergrund für einige weiße Texte verwendet werden. Eine dunkle Hintergrundfarbe kann erforderlich sein, damit der Vordereigentext lesbar ist, wenn das Bild nicht gerendert wird.

Das Weglassen von Bildquellen und das Einbeziehen einer Farbe ist gültig und erzeugt einen Farbmuster. Im Gegensatz zur Deklaration einer background-color, die unter oder hinter allen Hintergrundgrafiken platziert wird, kann dies verwendet werden, um (in der Regel halbtransparente) Farben über andere Grafiken zu legen.

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

Formale Syntax

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

<image-tags> = 
  ltr  |
  rtl  

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

Barrierefreiheit

Browser bieten keine speziellen Informationen zu Hintergrundgrafiken für assistive Technologien. Dies ist hauptsächlich für Screenreader wichtig, da ein Screenreader seine Anwesenheit nicht ankündigt und daher den Nutzern nichts vermittelt. Wenn die Grafik Informationen enthält, die für das Verständnis der allgemeinen Zweck der Seite entscheidend sind, ist es besser, sie semantisch im Dokument zu beschreiben.

• MDN Verständnis der WCAG, Erläuterungen zu Richtlinie 1.1
• Verständnis der Erfolgskriterium 1.1.1 | W3C Verständnis der WCAG 2.0

Dieses Feature kann helfen, die Barrierefreiheit zu verbessern, indem eine Fallback-Farbe bereitgestellt wird, wenn ein Bild nicht geladen wird. Während dies durch das Hinzufügen einer Hintergrundfarbe zu jedem Hintergrundbild erreicht werden kann und sollte, ermöglicht die CSS-image()-Funktion das Hinzufügen, wobei nur Hintergrundfarben hinzugefügt werden, falls ein Bild nicht geladen wird, was bedeutet, dass Sie eine Fallback-Farbe hinzufügen können, falls eine transparente PNG/GIF/WebP nicht lädt.

Beispiele

Richtungsabhängige Bilder

<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");
}

In den Links-nach-Rechts-Listenelementen — die mit dir="ltr" auf dem Element selbst gesetzt oder die Richtung von einem Vorfahren oder Standardwert für die Seite übernehmen — wird die Grafik wie vorgesehen verwendet. Listenelemente mit dir="rtl", die auf dem <li> gesetzt oder die Rechts-nach-Links-Richtung von einem Vorfahren übernehmen, z. B. auf Arabisch oder Hebräisch gesetzte Dokumente, werden das Aufzählungszeichen auf der rechten Seite anzeigen, horizontal gespiegelt, als ob transform: scaleX(-1) gesetzt wäre. Der Text wird ebenfalls Links-nach-Rechts angezeigt.

Anzeige eines Abschnitts des Hintergrundbildes

<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, wird der Cursor geändert, um den 16x16 px Abschnitt des Sprite-Bildes anzuzeigen, beginnend bei x=32 und y=64.

Farbe über ein Hintergrundbild legen

.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 oben Genannte wird eine halbtransparente schwarze Maske über das Firefox-Logo-Hintergrundbild legen. Hätten wir stattdessen die background-color-Eigenschaft verwendet, wäre die Farbe hinter dem Logobild erschienen anstelle darüber. Zusätzlich hätte der gesamte Container die gleiche Hintergrundfarbe. Da wir image() zusammen mit der background-size-Eigenschaft verwendet haben (und das Wiederholen des Bildes mit der background-repeat-Eigenschaft verhindert haben, wird der Farbmuster nur ein Viertel des Containers abdecken.

Spezifikationen

Browser-Kompatibilität

Derzeit unterstützen keine Browser dieses Feature.

Siehe auch

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