我们一起学习CSS image-set()
source link: https://www.zhangxinxu.com/wordpress/2019/11/css-image-set/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9090
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。
桐须真冬
关于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()，所以显示了兜底的图片，我随便找了张电脑里的图片示意了下。
古桥文乃
道理我都懂，但是你为什么使用真冬老师这张照片？@桐须真冬
而且还是不穿衣服照片，你个大变态。 
绪方理珠
武元润香
桐须真冬
什么情况？？！！！
欲知后事如何，且听下回分解
本文为原创文章，欢迎分享，勿全文转载，如果内容你实在喜欢，可以加入收藏夹，说不定哪天故事又继续更新了呢。
本文地址： https://www.zhangxinxu.com/wordpress/?p=9090
（本篇完）
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK