Gunakan set imej untuk melaksanakan imej latar belakang sandaran tanpa bergantung pada javascript

Question

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

Cuba 1 Ikuti jawapan sebelumnya. Beri perhatian kepada penggunaan webkit-image-set. Ini kod saya:

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

Ini berfungsi dalam Chrome dan Firefox, tetapi Safari pada ios menunjukkan imej kelabu.

Cuba 2 Ikuti jawapan di blog ini. Ambil perhatian bahawa image-set digunakan di sini. Kod:

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

Ini kelihatan pada ketiga-tiga penyemak imbas tetapi sentiasa menunjukkan png. Saya juga membalikkan kedudukan dalam set imej tetapi hasilnya adalah sama. Sentiasa png.

Percubaan 3, berbeza sedikit daripada percubaan 2. Saya baru sahaja menukar format baris pertama.

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

Ini berfungsi dengan baik pada chrome/firefox tetapi berwarna kelabu pada ios.

Adakah cara untuk menyelesaikan masalah ini? Terima kasih!

Answer 1

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