码迷,mamicode.com
首页 > Web开发 > 详细

CSS Sprites(基本写法,如何使用)

时间:2014-07-10 23:48:51      阅读:451      评论:0      收藏:0      [点我收藏+]

标签:style   http   color   使用   文件   width   

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

现在很多好的网站都是这么写,然后很多位置的图片,就用一张图片,然后一次URL请求就行了,加快网站访问速度

bubuko.com,布布扣

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

bubuko.com,布布扣

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

bubuko.com,布布扣

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

那么如何判断位置到底是多少?

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

bubuko.com,布布扣

 

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

原文地址 : 点击打开链接

CSS Sprites(基本写法,如何使用),布布扣,bubuko.com

CSS Sprites(基本写法,如何使用)

标签:style   http   color   使用   文件   width   

原文地址:http://blog.csdn.net/xtqueen/article/details/37601361

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!