image-set()

版本： CSS3

CSS image-set()函数表示法是一种让浏览器从给定集合中选择最合适的CSS图像的方法，主要用于高像素密度屏幕。分辨率和带宽因设备和网络访问而异。image-set()函数为用户的设备提供最合适的图像分辨率，提供一组图像选项（每个选项都有相关的分辨率声明），浏览器从中选择最适合设备和设置的图像。分辨率可以用作文件大小的代理-具有高分辨率屏幕的慢速移动连接上的用户代理可能更喜欢接收低分辨率图像，而不是等待加载高分辨率图像。image-set()允许作者提供选项，而不是确定每个用户需要什么。

示例

background-image: image-set( "cat.png" 1x,"cat-2x.png" 2x,"cat-print.png" 600dpi);

浏览器支持

IE、火狐浏览器不支持 image-set() ，其余浏览器都支持 image-set()

语法：

image-set ([ <image> | <string> ])

取值

image-set()可以根据用户设备的分辨率匹配合适的图像。为不同的设备分配合适得图像。

示例

div{background-image: image-set("test.png" 1x,"test-2x.png" 2x,"test-print.png" 600dpi );}

上述代码将会为普通屏幕使用 test.png，为高分屏使用 test-2x.png，如果更高的分辨率则使用 test-print.png，比如印刷。