请解释如何使用 CSS 的 image-set 函数加载不同分辨率的图片？

推荐答案

.element {
  background-image: image-set(
    url('image-1x.png') 1x,
    url('image-2x.png') 2x,
    url('image-3x.png') 3x
  );
}

本题详细解读

什么是 image-set 函数？

image-set 是 CSS 中的一个函数，用于根据设备的分辨率加载不同版本的图片。它允许开发者为不同的设备像素密度（如 1x、2x、3x 等）提供不同的图片资源，从而在高分辨率设备上显示更清晰的图片。

如何使用 image-set 函数？

image-set 函数的语法如下：

image-set(
  <image> <resolution>,
  <image> <resolution>,
  ...
);

• <image>：图片的 URL。
• <resolution>：图片的分辨率，通常用 1x、2x、3x 等表示。

示例解析

.element {
  background-image: image-set(
    url('image-1x.png') 1x,
    url('image-2x.png') 2x,
    url('image-3x.png') 3x
  );
}

• 当设备的分辨率为 1x 时，浏览器会加载 image-1x.png。
• 当设备的分辨率为 2x 时，浏览器会加载 image-2x.png。
• 当设备的分辨率为 3x 时，浏览器会加载 image-3x.png。

浏览器支持

image-set 目前在现代浏览器中得到广泛支持，但在一些旧版本浏览器中可能不被支持。为了确保兼容性，可以结合 background-image 使用：

.element {
  background-image: url('image-1x.png');
  background-image: image-set(
    url('image-1x.png') 1x,
    url('image-2x.png') 2x,
    url('image-3x.png') 3x
  );
}

这样，在不支持 image-set 的浏览器中，会回退到 image-1x.png。