Css Sprite使用方法

最新推荐文章于 2025-06-03 23:04:32 发布

原创最新推荐文章于 2025-06-03 23:04:32 发布 · 1.6w 阅读

3 ·

CC 4.0 BY-SA版权

DIV+CSS 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种提高网页加载效率的技术——CSS Sprites，并详细解释了如何通过图片拼合生成器来实现多张小图的合并，从而减少HTTP请求次数。文章还提供了具体的HTML和CSS代码示例，演示如何正确地定位背景图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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中