image-set()

基线 2023

新功能

自 2023 年 9 月起，此功能在最新的设备和浏览器版本上都能正常工作。此功能可能无法在旧设备或浏览器中正常工作。

image-set() CSS 函数 表示法是一种让浏览器从给定的图像集中选择最合适的 CSS 图像的方法，主要用于高像素密度屏幕。

设备和网络访问的解析度和带宽各不相同。image-set() 函数为用户的设备提供最合适的图像分辨率，提供一组图像选项，每个选项都与一个相关的分辨率声明相关联，浏览器会根据设备和设置选择最合适的选项。分辨率可以用作文件大小的代理，具有高分辨率屏幕的移动设备上的用户代理可能更愿意接收低分辨率图像，而不是等待高分辨率图像加载。

image-set() 允许作者提供选项，而不是确定每个用户的需求。

语法

css
/* Select image based on resolution */
image-set(
  "image1.jpg" 1x,
  "image2.jpg" 2x
);

image-set(
  url("image1.jpg") 1x,
  url("image2.jpg") 2x
);

/* Select gradient based on resolution */
image-set(
  linear-gradient(blue, white) 1x,
  linear-gradient(blue, green) 2x
);

/* Select image based on supported formats */
image-set(
  url("image1.avif") type("image/avif"),
  url("image2.jpg") type("image/jpeg")
);

值

<image>

<image> 可以是除图像集之外的任何图像类型。image-set() 函数不能嵌套在另一个 image-set() 函数内。

<string>

图像的 URL。

<resolution> 可选

<resolution> 单位包括 x 或 dppx（每像素点），dpi（每英寸点）和 dpcm（每厘米点）。image-set() 中的每个图像必须具有唯一的分辨率。

type(<string>) 可选

有效的 MIME 类型字符串，例如 "image/jpeg"。

正式语法

<image-set()> = 
  image-set( <image-set-option># )  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

可访问性

浏览器不会向辅助技术提供有关背景图像的任何特殊信息。这对屏幕阅读器来说尤其重要，因为屏幕阅读器不会宣布其存在，因此不会向用户传达任何内容。如果图像包含了解页面整体目的的关键信息，最好在文档中对其进行语义描述。

示例

使用 image-set() 提供替代的背景图像选项

此示例展示了如何使用 image-set() 提供两个替代的 background-image 选项，根据需要选择不同的分辨率：普通版本和高分辨率版本。

注意： 在上面的示例中，还使用了带 -webkit 前缀的版本来支持 Chrome 和 Safari。在 Firefox 90 中，添加了对 -webkit-image-set() 的支持，作为 image-set() 的别名（为了在开发人员没有添加标准属性的情况下提供兼容性）。

使用 image-set() 提供替代的图像格式

在下一个示例中，使用 type() 函数来提供 AVIF 和 JPEG 格式的图像。如果浏览器支持 avif，它将选择该版本。否则，它将使用 jpeg 版本。

提供回退

image-set() 没有内置回退；因此，要为不支持该函数的浏览器包含 background-image，需要在使用 image-set() 的行之前进行单独声明。

css
.box {
  background-image: url("large-balloons.jpg");
  background-image: image-set(
    "large-balloons.avif" type("image/avif"),
    "large-balloons.jpg" type("image/jpeg")
  );
}

规范

规范
CSS 图像模块级别 4
# image-set-notation

浏览器兼容性

BCD 表仅在浏览器中加载

另请参见