web前端工程师必须掌握的技巧–CSS Sprites技术(附基础操作教程)

2013-12-20阅读(3810)评论(2)牵着狗狗看MM

W3Cways.com 微信公众号

CSS Sprites

CSS Sprites就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。

使用CSS Sprites的优劣

使用CSS Sprites可以很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点。
但是维护起来比较麻烦。这里我分享一下我自己实际运用中的工具、方法和技巧。

工具准备

Fireworks_CS5:http://pan.baidu.com/s/1pJyeT3X

打开Fireworks新建一张图,把LOGO放进去(这里为了方便演示,LOGO图片位置随意放的),保存图片命名为sprite.png如下图:
1

Fireworks很方便,选择LOGO后,下方直接显示出LOGO的图片大小跟坐标位置。
假设我们要使用LOGO图片
对应的CSS代码

.logo {
background:(../images/sprite.png) no-repeat;
background-position:-24px -40px; 
/*这里使用负值,前面加-号*/
width:210px;height:52px;
}

也可以简写成:

.logo {
background:(../images/sprite.png) -24px -40px no-repeat;
width:210px;height:52px;
}

然后再导出图片(建议把源文件跟导出图分开,这样如果以后要修改图片内容或者增加图片内容,就直接在源文件图片里编辑,再导出就可以了,方便管理)

当然网上还有一些CSS Sprites生成工具,方便是方便,不过修改起来麻烦,还是自己制作比较好,方便管理修改,而且图片的质量也能得到保证

转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » web前端工程师必须掌握的技巧–CSS Sprites技术(附基础操作教程)
分享到: 更多 (0)

评论 2

评论前必须登录!

 

  1. #1

    一直都不怎么会使用position 看了你这边文章 终于明白了 谢谢大神 可以加个Q吗:295989501

    yuyan1306年前 (2013-12-20)