我目前有以下 HTML 代碼：
<header style="background-image:url(/images/header.webp)">
但是，在某些瀏覽器（主要是舊版本的 Safari）上，不支持 webp。所以我想指定一個后備 png 影像 URL。
使用picture標簽，我可以執行以下操作：
<picture>
<source type="image/webp" srcset="/images/header.webp">
<source type="image/png" srcset="/images/header.png">
</picture>
如何使用background-imageCSS 屬性做同樣的事情？
請注意，我可以不使用CSS樣式表對于這一點，我必須使用HTMLstyle屬性。這是由于我如何動態生成 HTML 內容。
uj5u.com熱心網友回復：
CSS Tricks建議使用像 Modernizr 這樣的特征檢測庫html.webp在支持的瀏覽器中將一個類添加到 HTML 根（如），這樣您就可以撰寫 CSS 來將 JPG 或 PNG 影像交換為 WEBP 影像：
.elementWithBackgroundImage {
background-image: url("image.png");
}
.webp .elementWithBackgroundImage {
background-image: url("image.webp");
}
uj5u.com熱心網友回復：
您可以呼叫多個背景。如果瀏覽器找不到第一個 URL，則第二個 URL 將用作后備。
<header style="background-image:url('/images/header.webp'), url('/images/header.png')">
注意：我不確定瀏覽器是否會選擇嘗試使用 .webp，即使它不受支持。您應該對此進行測驗以確認。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/389437.html
上一篇：我試圖制作顫振網路，但當我選擇不顯示的影像時，我遇到了個人資料圖片的問題
下一篇：Pygame中閃爍的精靈