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

这篇文章发布于 2019年11月17日,星期日,22:32,归类于 CSS相关。 阅读 4179 次, 今日 84 次 16 条评论

 

我们一起学习占位图

我们一起学习群
桐须真冬

桐须真冬

关于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(),所以显示了兜底的图片,我随便找了张电脑里的图片示意了下。

古桥文乃

古桥文乃

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

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

绪方理珠

绪方理珠

武元润香

武元润香

桐须真冬

桐须真冬

桐须真冬震惊

什么情况??!!!

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

(本篇完)

分享到:
×
×


发表评论(目前16 条评论)

  1. 土豆土豆啊说道:

    这是一种船新的学习文档表现手法,赞啊

  2. 柳柳说道:

    不知道为啥,就是想留个言

  3. 玻尔の枣糕说道:

    没想到您也是二刺猿,会心一笑

  4. Va说道:

    你好骚啊😏

  5. 张大大牛b说道:

    话说还实现了聊天功能布局。可以研究下
    大佬就是大佬

  6. coolb说道:

    流氓!呵忒

  7. redbuck说道:

    啥时候来个文言版吧😂

    主曰: 来者可是诸葛孔明?
    客曰: 正是,老匹夫受死

  8. LeonZou说道:

    我爱理珠(小生

  9. cshenger说道:

    大佬果然是老师党,那不好意思了,我只能大喊一声,文乃是天😂

  10. jyjin说道:

    报个bug: 我的第3,6次多条消息,气泡尖尖不止一个😬

  11. 忧郁的风说道:

    哈哈,这篇好有意思,不过在rss上没法看啊😂

  12. EmmaYXY说道:

    好厉害好厉害

  13. meepo说道:

    一开始以为是截屏, 然后发现居然是……

  14. yancy说道:

    对话的形式很有意思

  15. 周一快乐说道:

    哈哈哈哈哈,张大我怀疑你在开车!