桐须真冬

关于image-set()这个CSS新属性的学习，大家有什么不懂的直接在群里问唯我同学吧。

古桥文乃

好的

绪方理珠

o

武元润香

没问题哟~

唯我成幸

大家有什么想要了解的吗？

古桥文乃

我先问吧，image-set()是做什么用的？

唯我成幸

可以用来根据不同设备的屏幕密度或者分辨率显示不同的背景图片（background-image）或者遮罩图片（mask-image）等。

古桥文乃

可不可以举个例子？

唯我成幸

没问题，稍等……

请看代码：

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

注意，图片地址外面需要用url()包起来，规范文档还有MDN中的示例在Chrome下是无效的哟。

武元润香

赞注意事项！

关于上面的代码，每个字母都认识，但是为什么连起来我就不懂了呢？嘿嘿嘿嘿……

唯我成幸

上面CSS代码的意思是：如果屏幕是一倍屏，也就是设备像素比是1的话，就使用zxx.png作为背景图片；如果屏幕是2倍屏及其以上，则使用zxx-2x.png这张图作为背景图；如果设备的分辨率大于600dpi，则使用zxx-print.png作为背景图。

如果不了解设备像素比的概念，可以访问这篇文章。

绪方理珠

dpi?

武元润香

我也想问呢

唯我成幸

dpi表示每英寸点数。屏幕通常每英寸包含72或96点，打印文档的dpi通常要大得多。所以，dpi值在600以上我们就可以认为是打印设备了。

另外，1x，2x这里的x其实是dppx的别称，表示每像素单位的点数，也可以理解为屏幕密度。

绪方理珠

soga

古桥文乃

感觉和我以前看到过的一个名叫srcset的html属性很像呢？

唯我成幸

没错，和srcset无论是名称还是语法确实有相似之处，例如：

<img src="zxx.jpg" srcset="zxx-2x.png 2x">

不过srcset要复杂，还包括sizes属性, w描述符。强烈建议课后看看“响应式图片srcset全新释义”这篇文章。

绪方理珠

古桥文乃

古桥文乃

绪方理珠

武元润香

唯我成幸

大家可以点进去，看看自己手机加载的是哪个规格的图片，总共有128px，256px，512px三个规格。下面是使用的代码：

.image-set-by-zxx {
  width: 128px; height: 96px;
  background: url(not.jpg);
  background: -webkit-image-set(
    url(w128px.jpg) 1x, 
    url(w256px.jpg) 2x, 
    url(w512px.jpg) 3x);
  background: image-set(
    url(w128px.jpg) 1x, 
    url(w256px.jpg) 2x, 
    url(w512px.jpg) 3x);
  background-size: cover;
}

绪方理珠

这次看懂了。

武元润香

我也懂了，就是1倍屏加载w128px.jpg，2倍屏加载w256.jpg，3倍及其以上屏加载w512.jpg

唯我成幸

没错没错

例如我自己家台式机的普通显示器下打开demo页面加载的是128px规格图片，截图如下：

如果打开开发者工具，进入移动端预览模式，如iPhone6/7/8，则加载的是256px的图片，截图如下：

iPhone 6/7/8 plus是3倍屏，因此加载的是512px的图片，截图如下：

古桥文乃

一目了然

那这个CSS属性的兼容性如何呢，可以在实际项目中使用吗？

唯我成幸

兼容性如下图所示，IE和Firefox都不支持。Chrome和Safari都支持，因此，移动端可以使用，PC端其实也是可以使用的。

古桥文乃

PC不是有些浏览器不支持的吗？也能使用？

唯我成幸

对的，渐进增强就好了。再使用image-set()语句之前加一行传统的background: url()语句就好了，兜底，这样就算浏览器不支持image-set()，我们的界面样式依然良好。Demo页面就有这样的处理哦。

从这一点来看，image-set()实用性其实也就那样，实际开发往往直接传统语法使用2倍图，一来现在流量不值钱，二来省得准备多份尺寸图片，减少了开发和维护成本。只有海量用户产品，或者给东南亚、非洲开发的产品才需要考虑image-set()兼顾体验和流量。

古桥文乃

噢啦，那我看下兜底效果是怎样的。

奇怪，为什么我用Firefox浏览器打开显示的是下面这样子呢？

唯我成幸

那是因为你的浏览器不支持image-set()，所以显示了兜底的图片，我随便找了张电脑里的图片示意了下。

古桥文乃

道理我都懂，但是你为什么使用真冬老师这张照片？@桐须真冬

而且还是不穿衣服照片，你个大变态。

绪方理珠

武元润香

桐须真冬

什么情况？？！！！