image()

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 Grafikquellen spezifizieren, mit optionalen Bildfragment-Identifikatoren.

color Optional

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

Bidirektionales Bewusstsein

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

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 — zur Bildquelle hinzuzufügen, um nur einen Abschnitt des Quellbildes anzuzeigen. Der in der Parameter angegeben Bereich wird zu einem eigenständigen Bild. Die Syntax sieht wie folgt 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 den Koordinaten 0px, 20px (oben links) beginnt und 40px breit und 60px hoch ist.

Die #xywh=#,#,#,# Medienfragment-Syntax nimmt vier durch Kommas getrennte numerische Werte. Die ersten beiden repräsentieren die X- und Y-Koordinaten für den Startpunkt des zu erstellenden Kastens. Der dritte Wert ist die Breite des Kastens, und der letzte Wert ist die Höhe. Standardmäßig sind dies Pixelwerte. Die Definition der räumlichen Dimension in der Mediendokumentation 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 auch in url() Notation verwendet werden. Die #xywh=#,#,#,# Medienfragment-Syntax ist 'rückwärtskompatibel', da ein Medienfragment ignoriert wird, wenn es nicht verstanden wird, und der Quellaufruf beim Verwenden mit 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() unterstützen, 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() zusammen mit Ihren Bildquellen eine Farbe angegeben wird, dient diese als Fallback, falls die Bilder ungültig sind und nicht erscheinen. In solchen Fällen rendert die image() Funktion, als ob kein Bild enthalten wäre, und erzeugt ein einfarbiges Bild. Betrachten Sie als Anwendungsfall ein dunkles Bild, das als Hintergrund für einen weißen Text verwendet wird. Eine dunkle Hintergrundfarbe kann erforderlich sein, damit der Vordergrundtext lesbar bleibt, 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 halbtransparente) 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 zu bedecken. Sowohl image(color) als auch background-color Platzierungen werden durch die background-clip und background-origin Eigenschaften 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 Hintergrundbildern für unterstützende Technologien. Dies ist hauptsächlich für Bildschirmleser wichtig, da ein Bildschirmleser seine Anwesenheit nicht ankündigen wird und daher nichts an seine Benutzer vermittelt. Wenn das Bild Informationen enthält, die entscheidend sind, um den gesamten Zweck der Seite zu verstehen, ist es besser, es semantisch im Dokument zu beschreiben.

• MDN Verständnis WCAG, Leitlinie 1.1 Erklärungen
• Verständnis des Erfolgskriteriums 1.1.1 | W3C Verständnis WCAG 2.0

Diese Funktion kann dazu beitragen, die Barrierefreiheit zu verbessern, indem sie eine Fallback-Farbe bietet, wenn ein Bild nicht geladen wird. Obwohl dies durch Einfügen einer Hintergrundfarbe zu jedem Hintergrundbild erfolgen kann und sollte, ermöglicht die CSS image() Funktion, Hintergrundfarben nur dann einzufügen, wenn ein Bild nicht geladen wird, was bedeutet, dass Sie eine Fallback-Farbe einfügen können, falls ein transparentes 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 von links nach rechts gelisteten Elementen – diejenigen, die dir="ltr" auf dem Element selbst gesetzt haben oder die Richtung von einem Vorfahren oder vom Standardwert für die Seite erben – wird das Bild wie vorgesehen verwendet. Listenelemente mit dir="rtl", das auf dem <li> oder von einem Vorfahren geerbten Rechts-nach-Links-Richtung gesetzt ist, z. B. Dokumente, die auf Arabisch oder Hebräisch eingestellt sind, werden den Aufzählungspunkt rechts angezeigt bekommen, horizontal gespiegelt, als ob transform: scaleX(-1) eingestellt worden wäre. Der Text wird auch von links nach rechts angezeigt.

Anzeigen 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 den Mauszeiger über das Kästchen bewegt, ändert sich der Cursor, 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 obige Beispiel 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 Logo-Bild anstatt darüber erschienen. Darüber hinaus hätte der gesamte Container die gleiche Hintergrundfarbe gehabt. Da wir image() zusammen mit der background-size-Eigenschaft verwendet haben (und das Bild daran gehindert, sich mit der background-repeat-Eigenschaft zu wiederholen), wird das Farbfeld nur ein Viertel des Containers bedecken.

Spezifikationen

Browser-Kompatibilität

Derzeit unterstützen keine Browser diese Funktion.

Siehe auch

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