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 funktionale Notation ist eine Methode, mit der der Browser das am besten geeignete CSS-Bild aus einem gegebenen Satz auswählt, hauptsächlich für Bildschirme mit hoher Pixeldichte.

Auflösung und Bandbreite variieren je nach Gerät und Netzwerkzugang. Die image-set()-Funktion liefert die am besten geeignete Bildauflösung für das Gerät eines Benutzers und bietet eine Auswahl an Bildoptionen — jede mit einer zugeordneten Auflösungsdeklaration — aus der der Browser das am besten geeignete Bild für das Gerät und die Einstellungen auswählt. Die Auflösung kann als Stellvertreter für die Dateigröße verwendet werden — ein User-Agent mit einer langsamen mobilen Verbindung und einem hochauflösenden Bildschirm bevorzugt möglicherweise kleinere Auflösungen, um kürzere Ladezeiten zu haben.

image-set() ermöglicht es dem Autor, Optionen bereitzustellen, anstatt individuell zu bestimmen, 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 jeden Bildtyp darstellen, außer einem Bildset. Die image-set()-Funktion darf nicht innerhalb einer anderen image-set()-Funktion verschachtelt werden.
<string>: Eine URL zu einem Bild.
<resolution> Optional: <resolution> Einheiten umfassen x oder dppx für Punkte pro Pixeleinheit, 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: Ein gültiger MIME-Type-String, zum Beispiel "image/jpeg".

Formalsyntax

<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 über Hintergrundbilder für unterstützende Technologien. Dies ist vor allem für Screenreader wichtig, da ein Screenreader seine Anwesenheit nicht bekannt gibt und somit seinen Benutzern nichts mitteilt. Falls das Bild Informationen enthält, die für das Verständnis des gesamten Zwecks der Seite von entscheidender Bedeutung sind, ist es besser, es semantisch im Dokument zu beschreiben.

Beispiele

Verwendung von image-set(), um alternative background-image-Optionen bereitzustellen

Dieses Beispiel zeigt, wie image-set() verwendet wird, um zwei alternative background-image Optionen bereitzustellen, die je nach erforderlicher Auflösung ausgewählt werden: 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
  );
}

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 zu liefern. Wenn der Browser avif unterstützt, wird diese Version gewählt. Andernfalls wird die jpeg-Version verwendet.

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