CSS Sprite雪碧图详解

最新推荐文章于 2024-09-02 14:57:07 发布

cdgogo

最新推荐文章于 2024-09-02 14:57:07 发布

阅读量590

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/cdgogo/article/details/108101827

版权

CSS Sprite是一种图像拼合技术，用于减少HTTP请求，提升网页加载速度。通过合并小图标和背景图像到一张大图，并利用CSS背景定位显示所需部分。本文介绍了雪碧图的使用场景、目的、制作方法、优缺点及实践案例。

摘要由CSDN通过智能技术生成

CSS雪碧图，即CSS Sprite，也有人叫它CSS精灵图，是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。

CSS Sprite雪碧图

雪碧图的使用场景

静态图片，不随用户信息的变化而变化。
小图片，容量比较小（2~3k）。
图片加载量比较大。

目的

减少Http请求数量，加速内容显示。因为每请求一次，就会和服务器建立一次链接，而建立链接是需要额外的时间的。

使用

使用雪碧图之前，我们需要知道雪碧图中各个图标的位置。

![![在这里插入图片描述](https://img-blog.csdnimg.cn/20181031103828417.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NkX3lhb3Jhbw==,size_16,color_FFFFFF,t_70)][1]

从上面的图片不难看出雪碧图中各个小图标（icon）在整张雪碧图的起始位置，例如第一个图标（裙子）在雪碧图的起始位置为 x：0，y：0，第二个图标（鞋子）在雪碧图的起始位置为 x：0，y：50px，第三个图标（足球）在雪碧图的起始位置为x：0，y：100px，依次类推可以得出各个图片相对于雪碧图的起始位置。

以上面的雪碧图为例（实际雪碧图中各个小图片的起始位置和上面的展示图不同）用一个Demo来阐述它的使用方法。

效果图

HTML

   <div>
        <ul class="sidebar">
            <li><a href=""><span class="spr-icon icon1"></span>服装内衣</a></li>
            <li><a href=""><span class="spr-icon icon2"></span></