Verwenden Sie Bildsätze, um Ersatzhintergrundbilder zu implementieren, ohne auf Javascript angewiesen zu sein

Question

Ich bin ziemlich neu in Sachen Frontend und CSS. Ich versuche hinzuzufügen background-image，如果支持 .avif 文件，则加载这些文件。否则回退到 .png 文件。我想知道是否可以在没有 javascript 的情况下执行此操作，并且无需加载所有图像而不影响页面速度。我在（大部分）模拟器中运行 Chrome 107.0.5304.110、ios 16.1 （我知道旧版本的 ios 不支持 avif，但最新版本支持。希望能同时使用两者）和 Firefox 106.0.1.

Versuchen Sie es mit 1. Folgen Sie der vorherigen Antwort. Achten Sie auf die Verwendung von webkit-image-set. Das ist mein Code:

background-image: url("/static/img/image.png");
background-image: -webkit-image-set(url("/static/img/image.avif")1x );

Dies funktioniert in Chrome und Firefox, aber Safari auf iOS zeigt ein graues Bild.

Versuchen Sie es 2. Folgen Sie den Antworten in diesem Blog. Beachten Sie, dass hier image-set verwendet wird. Code:

background-image: url("/static/img/image.png");
background-image: image-set(
  url("/static/img/image.avif") 1x,
  url("/static/img/image.png") 1x,
);

Dies ist in allen drei Browsern sichtbar, zeigt jedoch immer PNG an. Ich habe auch die Position im Bildsatz umgekehrt, aber das gleiche Ergebnis erzielt. Immer PNG.

Versuch 3, etwas anders als Versuch 2. Ich habe gerade das Format der ersten Zeile geändert.

background-image: url("/static/img/image.avif");
background-image: image-set(
  url("/static/img/image.avif") 1x,
  url("/static/img/image.png") 1x,
);

Dies funktioniert gut auf Chrome/Firefox, ist aber auf iOS grau.

Gibt es eine Möglichkeit, dieses Problem zu lösen? Danke!

Answer 1

background-image: url("/static/img/image.avif"),url("/static/img/image.avif") 1x,url("/static/img/image.png") 1x;