CSS 函数 - image-set()

CSS 中的 image-set() 函数允许浏览器从给定的一组图像中选择最合适的图像，主要用于高像素密度屏幕。

浏览器将根据设备的显示特性选择最合适的图像。如果设备具有更高的像素密度，它将选择具有更高像素密度的图像（如果可用）。对于网络连接缓慢的移动设备，它更倾向于接收低分辨率的图像，而不是等待高分辨率图像或根本不加载任何图像。

image-set() 函数允许用户为图像提供选项，而不是固定一个。

语法

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

以下是一些示例语法：

image-set(
   "sampleimage1.png" 1x,
   "sampleimage2.png" 2x
);

image-set(
   url("sampleimage1.png") 1x,
   url("sampleimage2.png") 2x
);

/* use of gradient as image */
image-set(
   linear-gradient(red, yellow) 1x,
   linear-gradient(green, yellow) 2x
);

/* use of supported formats of images */
image-set(
   url("sampleimage1.png") type("sampleimage.png"),
   url("sampleimage2.jpg") type("sampleimage2.jpeg")
);

在上述语法中

url("sampleimage1.png") 1x 表示第一个图像源，像素密度为 1x。
url("sampleimage2.png") 2x 表示第二个图像源，像素密度为 2x。

可能的值

image-set() 函数可以包含以下值

<image>：可以是任何图像类型，除了图像集，这意味着 image-set() 函数不能嵌套在另一个 image-set() 函数中。
<string>：列出图像的 URL。
<resolution>：可选，指定图像的分辨率，以各种单位表示，例如
- x, dppx：像素点单位。
- dpi：英寸单位。
- dpcm：厘米单位。
type(<string>)：可选，指定有效的 MIME 类型字符串，例如 "sampleimage.jpeg"。

对于 Chrome 和 Safari，应使用前缀 -webkit。建议使用前缀版本以确保浏览器完全兼容。

辅助功能问题：没有向辅助技术提供有关背景图像的特殊信息，因此屏幕阅读器也不会宣布有关背景图像的任何内容。如果此类背景图像很重要并且向用户传达了任何信息，辅助技术将无法识别。建议在文档中以语义方式描述此类信息。

CSS image-set() - 备用背景图像

以下示例演示了如何使用 image-set() 函数设置备用背景图像

<html>
<head>
<style>
   .box {
      background-image: -webkit-image-set(
         "images/border.png" 1x,
         "images/white-flower.jpg" 2x
      );
      background-image: image-set(
         "images/border.png" 1x,
         "images/white-flower.jpg" 2x 
      );
      border: 3px solid black;
      width: 300px;
      height: 200px;
   }
</style>
</head>
<body>
   <div class="box"></div>
</body>
</html>

CSS image-set() - 备用图像格式

以下示例演示了如何使用 image-set() 函数为背景图像指定备用图像格式

 
<html>
<head>
<style>
   .box {
      background-image: -webkit-image-set(
         "images/red-flower.jpg" 1x,
         "images/border.png" 2x
      );
      background-image: image-set(
         "images/red-flower.jpg" 1x,
         "images/border.png" 2x
      );
      border: 3px solid black;
      width: 300px;
      height: 200px;
   }
</style>
</head>
<body>
   <div class="box"></div>
</body>
</html>

CSS image-set() - 提供回退选项

如果任何浏览器不支持 image-set() 函数，则可以提供一个回退选项图像作为背景。您需要在使用 image-set() 函数的行之前进行单独的声明，因为该函数没有内置的回退选项。

<html>
<head>
<style>
   .box {
      /* adding a fallback option*/
      background-image: url("images/white-flower.jpg")

      background-image: -webkit-image-set(
         "images/red-flower.jpg" 1x,
         "images/border.png" 2x
      );
      background-image: image-set(
         "images/red-flower.jpg" 1x,
         "images/border.png" 2x
      );
      border: 3px solid black;
      width: 300px;
      height: 200px;
   }
</style>
</head>
<body>
   <div class="box"></div>
</body>
</html>

打印页面