Utilisez des ensembles d'images pour implémenter des images d'arrière-plan de secours sans recourir à Javascript

Question

Je suis assez nouveau dans le front-end et le CSS. J'essaie d'ajouter background-image，如果支持 .avif 文件，则加载这些文件。否则回退到 .png 文件。我想知道是否可以在没有 javascript 的情况下执行此操作，并且无需加载所有图像而不影响页面速度。我在（大部分）模拟器中运行 Chrome 107.0.5304.110、ios 16.1 （我知道旧版本的 ios 不支持 avif，但最新版本支持。希望能同时使用两者）和 Firefox 106.0.1.

Essayez 1 Suivez la réponse précédente. Faites attention à l'utilisation de webkit-image-set. Voici mon code :

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

Cela fonctionne dans Chrome et Firefox, mais Safari sur iOS affiche une image grise.

Essayez 2 Suivez les réponses sur ce blog. Notez que image-set est utilisé ici. Code :

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

Ceci est visible sur les trois navigateurs mais affiche toujours en png. J'ai également inversé la position dans l'ensemble d'images mais le résultat est le même. Toujours png.

Tentative 3, légèrement différente de la tentative 2. Je viens de changer le format de la première ligne.

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

Cela fonctionne bien sur Chrome/Firefox mais est gris sur iOS.

Existe-t-il un moyen de résoudre ce problème ? Merci!

Answer 1

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