首页 > Web开发 > 详细

CSS Sprites(基本写法,怎样使用)

时间:2019-04-29 18:43:38      阅读:140      评论:0      收藏:0      [点我收藏+]
版权声明:本文为博主原创文章,未经博主同意不得转载。 https://blog.csdn.net/XTQueen_up/article/details/37601361

说白就是用样式表切一个大图片

如今非常多好的站点都是这么写,然后非常多位置的图片,就用一张图片。然后一次URL请求即可了。加快站点訪问速度

技术分享图片

这个就是切片工具能够直接导出下图框框中的内容

技术分享图片

这个是切片工具 所有拆分切开 用CSS精灵的方式合并到一起就ok了

技术分享图片

这里就是CSS精灵的写法 全用的一张图片 默认是?图片的位置是你div的左上角開始,我们用background-position,给他向左。向上移动一下 ,显示效果就变了。将会显示不同位置的图片,有些地方须要做平铺。所以我是横着切图的。终于文件就是那个res.png

那么怎样推断位置究竟是多少?

用PS的切片工具,能够直接看到位置和宽高

技术分享图片

?

————————————————————————————————————

原文地址 : 点击打开链接

CSS Sprites(基本写法,怎样使用)

原文:https://www.cnblogs.com/mqxnongmin/p/10791987.html

(0)
(0)
   
举报
评论 一句话评论(0
分享档案
最新文章
教程昨日排行
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!