HTML5学习班:CSS Sprites的原理

CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图

  一、将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-position”来实现背景图片的定位技术。

  二、图片整合的优势:

  1)通过图片整合来减少对服务器的请求次数,从而提高 页面的加载速度。

  2)通过整合图片来减小图片的体积。

  HTML5学习班:CSS Sprites的原理

  2、图片整合原则

  1)边切图边整合。

  2)定位时避免使用bottom,right等,用具体的数值,为了避免当你的宽度或高度上扩展sprites图时出现位置的错误。

  3)将小图标预留足够的空间,因为使用这些图标元素通常会有大量的内容而且可能需要扩展的间距,以至于其它的图片可能会意外出现在本区域内。一般的情况下,会将这些小图标整合到文件的最右侧。

  4)单张整合好的sprite图片在100KB以内。

  5)按分类整合图片。

HTML5学习班:CSS Sprites的原理

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值