Css Sprite使用方法
来源:互联网 发布:计算机数据安全技术 编辑:程序博客网 时间:2024/06/07 01:31
Css Sprite使用方法:
1、将用到的背景图片压缩为zip格式的压缩包
2、用Css图片拼合生成器将其拼合成一张图片,然后下载该图片
3、拼合完成后会生成相应的Css规则,该文件定位了每个图片的位置及图片的宽度和高度
4、在Css样式中定位背景图片,例如:
html代码:
ul.share li{float:left;}ul.share li a{display:block;width:25px;height:25px;text-indent:-9999px;}a.renren{background:url(../images/share.gif) 0 0 no-repeat;}a.kaixin{background:url(../images/share.gif) -25px 0 no-repeat;}a.sina{background:url(../images/share.gif) -50px 0 no-repeat;}a.douban{background:url(../images/share.gif) -75px 0 no-repeat;}a.googleBM{background:url(../images/share.gif) -100px 0 no-repeat;}
Css代码:
<ul class="share"><li>分享到:</li><li><a class="renren" href="/cuiying_2007/blog/ " title="">人人网</a></li><li><a class="kaixin" href="/cuiying_2007/blog/ " title="">开心网</a></li><li><a class="sina" href="/cuiying_2007/blog/ " title="">新浪微博</a></li><li><a class="douban" href="/cuiying_2007/blog/ " title="">豆瓣</a></li><li><a class="googleBM" href="/cuiying_2007/blog/ " title="">谷歌书签</a></li></ul>
注:
background第一个数字:X轴的偏移量
background第二个数字:Y轴的偏移量
上述两个偏移量就是用图片拼合生成器拼合图片时生成的Css规则中的偏移量
5、需要repeat的图片也有可能不适合放在sprite中,当然如果只是单向的repeat,如:repeat-x
或repeat-y,只要保证图片在该方向铺满就可以了,但是如果sprite很大,会消耗较多
的内存,或者需要横向和纵向同时平铺的图片,也都不适合放在sprite中
- Css Sprite使用方法
- css sprite
- css sprite
- css sprite
- CSS Sprite
- CSS Sprite
- CSS sprite
- css sprite
- css sprite
- css sprite
- css sprite
- CSS Sprite
- css Sprite
- CSS Sprite
- css sprite--css精灵
- CSS sprite css 精灵
- css sprite/css精灵
- CSS Sprite(css精灵)
- 任小笨空间伤感日志:享受瞬间的华丽、绽放凄美的诀别
- Head First 设计模式第二章 ----observer模式笔记
- Android Filter
- onNewIntent
- RMQ问题的ST算法详解
- Css Sprite使用方法
- iTextSharp 使用详解 读写PDF
- configuration information could not be read from the domain controller报错
- JNI全攻略之——操作Java对象的属性
- 《乔布斯传》圈点(10)
- 数组学习笔记
- Jquery全选/取消checkbox
- hdu 1505 city game
- 硅谷程序员高薪还能维持多久