我们一起学习CSS image-set()

摘要转载自 「张鑫旭-鑫空间-鑫生活」 (https://www.zhangxinxu.com/wordpress/2019/11/css-image-set/)

预计阅读时间 0 分钟(共 0 个字, 0 张图片, 0 个链接)

我们一起学习占位图

我们一起学习群
桐须真冬
桐须真冬

关于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全新释义”这篇文章。

绪方理珠
绪方理珠

古桥文乃
古桥文乃

唯我成幸
唯我成幸

为了方便大家学习,我还做了个demo演示页面,大家可以狠狠地点击这里:CSS image-set()与不同尺寸背景图demo

古桥文乃
古桥文乃

绪方理珠
绪方理珠

武元润香
武元润香

唯我成幸
唯我成幸

大家可以点进去,看看自己手机加载的是哪个规格的图片,总共有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规格图片,截图如下:

普通显示器Chrome加载128尺寸

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

iphone6加载256尺寸

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

iphone plus加载256尺寸

古桥文乃
古桥文乃

一目了然

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

唯我成幸
唯我成幸

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

image-set的兼容性

古桥文乃
古桥文乃

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

唯我成幸
唯我成幸

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

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

古桥文乃
古桥文乃

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

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

不支持图片示意

唯我成幸
唯我成幸

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

古桥文乃
古桥文乃

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

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

绪方理珠
绪方理珠

武元润香
武元润香

桐须真冬
桐须真冬

桐须真冬震惊

什么情况??!!!

欲知后事如何,且听下回分解

(本篇完)

more_vert