CSS精灵图

小白求学1

于 2024-10-03 10:41:12 发布

阅读量204

点赞数 5

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/2401_82561004/article/details/142689779

版权

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

当用户访问一个网站时，浏览器会向服务器发送一系列请求，比如说网页上的每张图像都需要经过一次请求才能最终展示给用户。然而，一个网页中往往包含大量的图像资源（例如在页面中展示的图片、网页的背景图像以及一些装饰性的图像等），这就会导致浏览器频繁的请求服务器，大大降低网页的加载速度。为了有效的减少请求服务器的次数，提高页面加载的速度，就出现了
CSS Sprites 技术，也被称为精灵技术。

简单来讲，精灵技术就是一种处理网页背景图像的方式，它需要将一个页面中涉及到的所有或一部分较小的背景图像合并到一张较大的图片中，然后再将这个图片应用到网页种。通常情况下，我们只是将背景图像中那些较小的、零碎的图像集中到一个大的图像中，这个较大的图像被称为精灵图（也被称为雪碧图），如下图所示就是淘宝网上应用的一个精灵图：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
图：淘宝网中的精灵图

精灵图的使用也非常简单，只需要借助 background 或者 background-position
属性来定位背景图像的位置即可。下面以上图所示的精灵图为例，来演示一下精灵图的使用：

<!DOCTYPE html>

<html>

<head>

    <style>

        ul li {

            float: left;

            width: 30px;

            height: 30px;

            list-style: none;

            margin: 5px;

            border: 1px solid #CCC;

            border-radius: 6px;

        }

        ul li:nth-child(1){

            background: url(./sprite.png) no-repeat 4px 1px;

        }

        ul li:nth-child(2){

            background: url(./sprite.png) no-repeat -38px 1px;

        }

        ul li:nth-child(3){

            background: url(./sprite.png) no-repeat -81px 3px;

        }

        ul li:nth-child(4){

            background: url(./sprite.png) no-repeat -123px 2px;

        }

        ul li:nth-child(5){

            background: url(./sprite.png) no-repeat -171px 0px;

        }

        ul li:nth-child(6){

            background: url(./sprite.png) no-repeat -214px 2px;

        }

        ul li:nth-child(7){

            background: url(./sprite.png) no-repeat -267px 1px;

        }

        ul li:nth-child(8){

            background: url(./sprite.png) no-repeat 2px -36px;

        }

    </style>

</head>

<body>

    <ul>

        <li></li><li></li>

        <li></li><li></li>

        <li></li><li></li>

        <li></li><li></li>

    </ul>

</body>

</html>

运行结果如下：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
图：精灵图演示

简单来说，精灵图就是一个大的背景图，您只需要使用 background-position
来移动背景图，从而只显示背景图的一部分。目前为止，精灵图发展的已经非常成熟，阿里巴巴、百度、谷歌、京东、淘宝等大型网站中都可以看到精灵图的影子，使用精灵图可以减少图片的体积，也可以显著的减少对服务器的请求次数，提高网页的加载速度。当然，使用精灵图也不是没有弊端，比如：