csssprite css解析gif文件 使用csssprite

8 篇文章 0 订阅
1 篇文章 0 订阅

很早之前发现w3cschool使用的是这用css解析gif文件 很多小图标全放到一个gif文件这样可以减少http请求次数,提高响应速度

现在自己也能轻松搞定了


<!--http://cn.spritegen.website-performance.org/ 合成图片 css解析gif文件   
		要求test.gif和该文件放在同一目录下-->
<style type="text/css">
.sprite-accept{  background: url(test.gif); background-position: 0 0; width: 16px; height: 16px; } 
.sprite-resultset_first{background: url(test.gif); background-position: -66px 0; width: 16px; height: 16px; } 
.sprite-resultset_last{ background: url(test.gif);background-position: -132px 0; width: 16px; height: 16px; } 
.sprite-resultset_next{ background: url(test.gif);background-position: -198px 0; width: 16px; height: 16px; } 
.sprite-resultset_previous{ background: url(test.gif);background-position: -264px 0; width: 16px; height: 16px; } 
</style>
获取第一个图标:<div class="sprite-accept"></div>
获取最后一个图标:<div class="sprite-resultset_previous">

test.gif文件在左侧

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值