css sprint使用方法



Css Sprite使用方法:

1、将用到的背景图片压缩为zip格式的压缩包
2、用Css图片拼合生成器将其拼合成一张图片,然后下载该图片
3、拼合完成后会生成相应的Css规则,该文件定位了每个图片的位置及图片的宽度和高度
4、在Css样式中定位背景图片,例如:


html代码:

  1. ul.share li{float:left;}  
  2. ul.share li a{display:block;width:25px;height:25px;text-indent:-9999px;}  
  3. a.renren{background:url(../images/share.gif) 0 0 no-repeat;}  
  4. a.kaixin{background:url(../images/share.gif) -25px 0 no-repeat;}  
  5. a.sina{background:url(../images/share.gif) -50px 0 no-repeat;}  
  6. a.douban{background:url(../images/share.gif) -75px 0 no-repeat;}  
  7. a.googleBM{background:url(../images/share.gif) -100px 0 no-repeat;}   
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代码:

  1. <ul class="share">  
  2. <li>分享到:</li>  
  3. <li><a class="renren" href="/cuiying_2007/blog/ " title="">人人网</a></li>  
  4. <li><a class="kaixin" href="/cuiying_2007/blog/ " title="">开心网</a></li>  
  5. <li><a class="sina" href="/cuiying_2007/blog/ " title="">新浪微博</a></li>  
  6. <li><a class="douban" href="/cuiying_2007/blog/ " title="">豆瓣</a></li>  
  7. <li><a class="googleBM" href="/cuiying_2007/blog/ " title="">谷歌书签</a></li>  
  8. </ul>  
<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中




<div title="超神" style="width:200px;height:200px;background:url(imgs/btnImgs01.jpg) 200px 0px ">



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值