使用圖像集實現後備背景圖像而不依賴 javascript

Question

我對前端和 CSS 相當陌生。我正在嘗試添加 background-image，如果支援 .avif 文件，則加載這些文件。否則回退到 .png 檔案。我想知道是否可以在沒有 javascript 的情況下執行此操作，並且無需加載所有圖像而不影響頁面速度。我在（大部分）模擬器中運行Chrome 107.0.5304.110、ios 16.1 （我知道舊版的ios 不支援avif，但最新版本支援。希望能同時使用兩個者）和Firefox 106.0.1。

嘗試 1 遵循先前的答案。注意 webkit-image-set 的用法。這是我的程式碼：

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

此操作適用於 Chrome 和 Firefox，但 ios 上的 Safari 顯示灰色影像。

嘗試 2 遵循此部落格上的答案。注意這裡使用的是image-set。程式碼：

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

這在所有三個瀏覽器上都可見，但始終顯示 png。我還反轉了影像集中的位置，但結果相同。始終為 png。

嘗試 3，與嘗試 2 略有不同。我只是更改了第一行的格式。

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

這在 chrome/firefox 上運作良好，但 ios 是灰色的。

有辦法解決這個問題嗎？謝謝！

Answer 1

雷雷