如何将多种 URL 类型添加到`background-image` CSS 属性？

Posted 2023-03-05

【中文标题】如何将多种 URL 类型添加到`background-image` CSS 属性？

【英文标题】：How to add multiple URL types to `background-image` CSS property?

【发布时间】：2022-01-20 14:26:32

【问题描述】：

我目前有以下 html 代码：

<header style="background-image:url(/images/header.webp)">

但是，在某些浏览器（主要是旧版本的 Safari）上，webp is not supported。所以我想指定一个后备 png 图片 URL。

使用picture 标签我可以执行以下操作：

<picture>
    <source type="image/webp" srcset="/images/header.webp">
    <source type="image/png" srcset="/images/header.png">
</picture>

如何使用background-image CSS 属性做同样的事情？

注意，我可以不为此使用 CSS 样式表，我必须使用 HTML style 属性。这是由于我如何动态生成 HTML 内容。

【问题讨论】：

试试这个<header style="background-image:url(/images/header.webp), url(/images/header-2.webp)">

@Ashish 我没有 2 张 webp 图片。我有 1 个 png 和 1 个 webp。基于w3schools.com/Css/css3_backgrounds.asp，该代码看起来适用于多种背景。这不是我要找的。我正在寻找 webp 背景图片，如果浏览器不支持 webp，则回退到 png。

【参考方案1】：

您可以调用多个背景。如果浏览器找不到第一个 URL，第二个 URL 将作为备用。

<header style="background-image:url('/images/header.webp'), url('/images/header.png')">

注意：我不确定浏览器是否会选择尝试使用 .webp，即使它不受支持。您应该对此进行测试以确认。

【参考方案2】：

CSS Tricks 建议在支持的浏览器中使用像 Modernizr 这样的特征检测库向 HTML 根目录添加一个类（如 html.webp），这样您就可以编写将 JPG 或 PNG 图像交换为 WEBP 图像的 CSS：

.elementWithBackgroundImage 
  background-image: url("image.png");


.webp .elementWithBackgroundImage 
  background-image: url("image.webp");

【讨论】：

这很有帮助。但我不确定它是否会起作用，因为我不能使用 CSS 样式表并且必须使用 style 属性（由于我如何动态生成 HTML 内容）。

@CharlieFish 你是如何动态生成 HTML 的？如果您使用 JS 在浏览器中执行此操作，则可以使用特征检测来内联包含正确的图像格式。如果您正在生成 DOM 服务器端，则可以使用相关代码向 DOM 输出 <style> 属性。