这篇文章发布于 2019年11月17日,星期日,22:32,归类于 CSS相关。 阅读 33051 次, 今日 4 次 26 条评论
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9090
本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。
![桐须真冬](http://image.zhangxinxu.com/image/blog/201911/avatar-teacher.png)
关于image-set()这个CSS新属性的学习,大家有什么不懂的直接在群里问唯我同学吧。
![古桥文乃](http://image.zhangxinxu.com/image/blog/201911/avatar-wennai.png)
好的
![绪方理珠](http://image.zhangxinxu.com/image/blog/201911/avatar-lizhu.png)
o
![武元润香](http://image.zhangxinxu.com/image/blog/201911/avatar-runxiang.png)
没问题哟~
![唯我成幸](http://image.zhangxinxu.com/image/blog/201911/avatar-weiwo.png)
大家有什么想要了解的吗?
![古桥文乃](http://image.zhangxinxu.com/image/blog/201911/avatar-wennai.png)
我先问吧,image-set()是做什么用的?
![唯我成幸](http://image.zhangxinxu.com/image/blog/201911/avatar-weiwo.png)
可以用来根据不同设备的屏幕密度或者分辨率显示不同的背景图片(background-image)或者遮罩图片(mask-image)等。
![古桥文乃](http://image.zhangxinxu.com/image/blog/201911/avatar-wennai.png)
可不可以举个例子?
![唯我成幸](http://image.zhangxinxu.com/image/blog/201911/avatar-weiwo.png)
没问题,稍等……
请看代码:
background-image: image-set(url(zxx.png) 1x, url(zxx-2x.png) 2x, url(zxx-print.png) 600dpi);
注意,图片地址外面需要用url()包起来,规范文档还有MDN中的示例在Chrome下是无效的哟。
![武元润香](http://image.zhangxinxu.com/image/blog/201911/avatar-runxiang.png)
赞注意事项!
关于上面的代码,每个字母都认识,但是为什么连起来我就不懂了呢?嘿嘿嘿嘿……
![唯我成幸](http://image.zhangxinxu.com/image/blog/201911/avatar-weiwo.png)
上面CSS代码的意思是:如果屏幕是一倍屏,也就是设备像素比是1的话,就使用zxx.png作为背景图片;如果屏幕是2倍屏及其以上,则使用zxx-2x.png这张图作为背景图;如果设备的分辨率大于600dpi,则使用zxx-print.png作为背景图。
如果不了解设备像素比的概念,可以访问这篇文章。
![绪方理珠](http://image.zhangxinxu.com/image/blog/201911/avatar-lizhu.png)
dpi?
![武元润香](http://image.zhangxinxu.com/image/blog/201911/avatar-runxiang.png)
我也想问呢
![唯我成幸](http://image.zhangxinxu.com/image/blog/201911/avatar-weiwo.png)
dpi表示每英寸点数。屏幕通常每英寸包含72或96点,打印文档的dpi通常要大得多。所以,dpi值在600以上我们就可以认为是打印设备了。
另外,1x,2x这里的x其实是dppx的别称,表示每像素单位的点数,也可以理解为屏幕密度。
![绪方理珠](http://image.zhangxinxu.com/image/blog/201911/avatar-lizhu.png)
soga
![古桥文乃](http://image.zhangxinxu.com/image/blog/201911/avatar-wennai.png)
感觉和我以前看到过的一个名叫srcset的html属性很像呢?
![唯我成幸](http://image.zhangxinxu.com/image/blog/201911/avatar-weiwo.png)
没错,和srcset无论是名称还是语法确实有相似之处,例如:
<img src="zxx.jpg" srcset="zxx-2x.png 2x">
不过srcset要复杂,还包括sizes属性, w描述符。强烈建议课后看看“响应式图片srcset全新释义”这篇文章。
![绪方理珠](http://image.zhangxinxu.com/image/blog/201911/avatar-lizhu.png)
![古桥文乃](http://image.zhangxinxu.com/image/blog/201911/avatar-wennai.png)
![唯我成幸](http://image.zhangxinxu.com/image/blog/201911/avatar-weiwo.png)
为了方便大家学习,我还做了个demo演示页面,大家可以狠狠地点击这里:CSS image-set()与不同尺寸背景图demo
![古桥文乃](http://image.zhangxinxu.com/image/blog/201911/avatar-wennai.png)
![绪方理珠](http://image.zhangxinxu.com/image/blog/201911/avatar-lizhu.png)
![武元润香](http://image.zhangxinxu.com/image/blog/201911/avatar-runxiang.png)
![唯我成幸](http://image.zhangxinxu.com/image/blog/201911/avatar-weiwo.png)
大家可以点进去,看看自己手机加载的是哪个规格的图片,总共有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; }
![绪方理珠](http://image.zhangxinxu.com/image/blog/201911/avatar-lizhu.png)
这次看懂了。
![武元润香](http://image.zhangxinxu.com/image/blog/201911/avatar-runxiang.png)
我也懂了,就是1倍屏加载w128px.jpg,2倍屏加载w256.jpg,3倍及其以上屏加载w512.jpg
![唯我成幸](http://image.zhangxinxu.com/image/blog/201911/avatar-weiwo.png)
没错没错
例如我自己家台式机的普通显示器下打开demo页面加载的是128px规格图片,截图如下:
如果打开开发者工具,进入移动端预览模式,如iPhone6/7/8,则加载的是256px的图片,截图如下:
iPhone 6/7/8 plus是3倍屏,因此加载的是512px的图片,截图如下:
![古桥文乃](http://image.zhangxinxu.com/image/blog/201911/avatar-wennai.png)
一目了然
那这个CSS属性的兼容性如何呢,可以在实际项目中使用吗?
![唯我成幸](http://image.zhangxinxu.com/image/blog/201911/avatar-weiwo.png)
兼容性如下图所示,IE和Firefox都不支持。Chrome和Safari都支持,因此,移动端可以使用,PC端其实也是可以使用的。
![古桥文乃](http://image.zhangxinxu.com/image/blog/201911/avatar-wennai.png)
PC不是有些浏览器不支持的吗?也能使用?
![唯我成幸](http://image.zhangxinxu.com/image/blog/201911/avatar-weiwo.png)
对的,渐进增强就好了。再使用image-set()语句之前加一行传统的background: url()语句就好了,兜底,这样就算浏览器不支持image-set(),我们的界面样式依然良好。Demo页面就有这样的处理哦。
从这一点来看,image-set()实用性其实也就那样,实际开发往往直接传统语法使用2倍图,一来现在流量不值钱,二来省得准备多份尺寸图片,减少了开发和维护成本。只有海量用户产品,或者给东南亚、非洲开发的产品才需要考虑image-set()兼顾体验和流量。
![古桥文乃](http://image.zhangxinxu.com/image/blog/201911/avatar-wennai.png)
噢啦,那我看下兜底效果是怎样的。
奇怪,为什么我用Firefox浏览器打开显示的是下面这样子呢?
![唯我成幸](http://image.zhangxinxu.com/image/blog/201911/avatar-weiwo.png)
那是因为你的浏览器不支持image-set(),所以显示了兜底的图片,我随便找了张电脑里的图片示意了下。
![古桥文乃](http://image.zhangxinxu.com/image/blog/201911/avatar-wennai.png)
道理我都懂,但是你为什么使用真冬老师这张照片?@桐须真冬
而且还是不穿衣服照片,你个大变态。
![绪方理珠](http://image.zhangxinxu.com/image/blog/201911/avatar-lizhu.png)
![武元润香](http://image.zhangxinxu.com/image/blog/201911/avatar-runxiang.png)
![桐须真冬](http://image.zhangxinxu.com/image/blog/201911/avatar-teacher.png)
什么情况??!!!
欲知后事如何,且听下回分解
本文为原创文章,欢迎分享,勿全文转载,如果内容你实在喜欢,可以加入收藏夹,说不定哪天故事又继续更新了呢。
本文地址:https://www.zhangxinxu.com/wordpress/?p=9090
(本篇完)
- HTML5响应式图片技术中文图解 (0.417)
- 为什么HTML <picture>元素很少见人使用? (0.417)
- 客栈说书:CSS遮罩CSS3 mask/masks详细介绍 (0.313)
- 借助CSS mask遮罩显著优化PNG图片的尺寸 (0.313)
- 666,看hr标签实现分隔线如何玩出花 (0.313)
- 颠覆,原来background-image也是支持CSS动画的 (0.271)
- 如何让文字作为CSS背景图片显示? (0.271)
- 巧用CSS cross-fade()实现背景图像半透明效果 (0.208)
- 图片加载失败后CSS样式处理最佳实践 (0.208)
- HTML elementtiming属性初体验记录 (0.208)
- CSS gradient渐变之webkit核心浏览器下的使用 (RANDOM - 0.063)
这个微信对话框,是什么实现的呢,有快速模板吗
哈哈 这么逗的吗
想问下这种对话形式是用什么实现的?
道理我都懂,但是你为什么使用真冬老师这张照片?
笑死了哈哈哈
有一个注意点,图片 url 不能用引号包起来,这是很容易混淆的地方
你怎么穿着贫乳的衣服
哈哈 展现方式真是赞
哈哈哈哈,这个表现真的好,看完这期去补了 我们无法一起学习
学到了 有点意思哦
这是一种船新的学习文档表现手法,赞啊
不知道为啥,就是想留个言
没想到您也是二刺猿,会心一笑
你好骚啊😏
话说还实现了聊天功能布局。可以研究下
大佬就是大佬
流氓!呵忒
啥时候来个文言版吧😂
主曰: 来者可是诸葛孔明?
客曰: 正是,老匹夫受死
我爱理珠(小生
大佬果然是老师党,那不好意思了,我只能大喊一声,文乃是天😂
报个bug: 我的第3,6次多条消息,气泡尖尖不止一个😬
哈哈,这篇好有意思,不过在rss上没法看啊😂
好厉害好厉害
一开始以为是截屏, 然后发现居然是……
你不说我还没发现。我也以为是截屏
对话的形式很有意思
哈哈哈哈哈,张大我怀疑你在开车!