image-set()

Baseline 2023

Newly available

Since ⁨September 2023⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die image-set() CSS Funktional Notation ist eine Methode, die es dem Browser ermöglicht, aus einem gegebenen Satz das am besten geeignete CSS-Bild auszuwählen, hauptsächlich für Bildschirme mit hoher Pixeldichte.

Die Auflösung und Bandbreite variiert je nach Gerät und Netzwerkzugang. Die image-set() Funktion liefert die am besten geeignete Bildauflösung für das Gerät eines Benutzers, indem sie eine Reihe von Bildoptionen bereitstellt – jede mit einer zugehörigen Auflösungsdeklaration – aus denen der Browser das passendste für das Gerät und die Einstellungen auswählt. Die Auflösung kann als Proxy für die Dateigröße verwendet werden – ein User-Agent mit einer langsamen mobilen Verbindung und einem hochauflösenden Bildschirm kann es vorziehen, niedrigauflösende Bilder zu empfangen, anstatt darauf zu warten, dass ein Bild in höherer Auflösung geladen wird.

image-set() ermöglicht es dem Autor, Optionen bereitzustellen, anstatt festzulegen, was jeder einzelne Benutzer benötigt.

Syntax

css

/* Select image based on resolution */
image-set(
  "image1.jpg" 1x,
  "image2.jpg" 2x
);

image-set(
  url("image1.jpg") 1x,
  url("image2.jpg") 2x
);

/* Select gradient based on resolution */
image-set(
  linear-gradient(blue, white) 1x,
  linear-gradient(blue, green) 2x
);

/* Select image based on supported formats */
image-set(
  url("image1.avif") type("image/avif"),
  url("image2.jpg") type("image/jpeg")
);

Werte

<image>: Das <image> kann jeder Bildtyp sein, außer einem Bildsatz. Die image-set() Funktion darf nicht innerhalb einer anderen image-set() Funktion verschachtelt sein.
<string>: Eine URL zu einem Bild.
<resolution> Optional: <resolution> Einheiten schließen x oder dppx ein, für Punkte pro Pixel, dpi, für Punkte pro Zoll, und dpcm für Punkte pro Zentimeter. Jedes Bild innerhalb eines image-set() muss eine einzigartige Auflösung haben.
type(<string>) Optional: Eine gültige MIME-Typ-Zeichenfolge, zum Beispiel "image/jpeg".

Formale Syntax

<image-set()> = 
  image-set( <image-set-option># )  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

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

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

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

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>

Barrierefreiheit

Browser bieten keine speziellen Informationen zu Hintergrundbildern für unterstützende Technologien. Dies ist hauptsächlich für Screenreader wichtig, da ein Screenreader seine Anwesenheit nicht ankündigen und somit seinen Benutzern nichts vermitteln wird. Wenn das Bild Informationen enthält, die zum Verständnis des Gesamtzwecks der Seite entscheidend sind, ist es besser, es semantisch im Dokument zu beschreiben.

Beispiele

Die Verwendung von image-set(), um alternative Optionen für background-image bereitzustellen

Dieses Beispiel zeigt, wie man image-set() verwendet, um zwei alternative background-image Optionen bereitzustellen, je nach benötigter Auflösung: eine normale Version und eine hochauflösende Version.

html

<div class="box"></div>

css

.box {
  width: 400px;
  height: 200px;
  background-repeat: no-repeat;
  background-size: cover;

  background-image: image-set(
    url("https://mdn.github.io/shared-assets/images/examples/balloons-small.jpg")
      1x,
    url("https://mdn.github.io/shared-assets/images/examples/balloons-landscape.jpg")
      2x
  );
}

Die Verwendung von image-set(), um alternative Bildformate bereitzustellen

Im nächsten Beispiel wird die type() Funktion verwendet, um das Bild in AVIF- und JPEG-Formaten bereitzustellen. Wenn der Browser AVIF unterstützt, wird er diese Version wählen. Andernfalls wird er die JPEG-Version verwenden.

html

<div class="box"></div>

css

.box {
  width: 400px;
  height: 200px;
  background-repeat: no-repeat;
  background-size: cover;

  background-image: image-set(
    "https://mdn.github.io/shared-assets/images/examples/balloons-landscape.avif"
      type("image/avif"),
    "https://mdn.github.io/shared-assets/images/examples/balloons-landscape.jpg"
      type("image/jpeg")
  );
}

Spezifikationen

Specification
CSS Images Module Level 4 # image-set-notation

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden