csssprite css解析gif文件 使用csssprite

来源:互联网 发布:淘宝网人工投诉电话 编辑:程序博客网 时间:2024/06/05 02:46

很早之前发现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文件在左侧

原创粉丝点击