↩ zhcn 编程语言 Web相关 JSON 非公開: CSS精灵图（sprite）

CSS精灵图（sprite）

当用户访问网站时，浏览器会向服务器发送一系列请求。例如，网页上的每张图像在最终显示给用户之前都必须经过一次请求。然而，网页中往往包含许多图像资源（例如页面显示的图像、网页背景图像以及一些装饰图像），这对浏览器频繁地向服务器提出网页加载速度的要求。为了有效减少对服务器的请求次数，提高页面加载速度，CSS精灵技术也称为精灵技术应运而生。

简单来说，精灵技术是一种处理网页背景图像的方法，涉及将页面中包含的全部或部分较小的背景图像组合成较大的图像，并将该图像应用到类型中。的网页。通常，您只需将背景图像的小碎片图像组合成更大的图像。这个大图像称为精灵图像（也称为精灵图像），如下图所示。 :

使用精灵贴图也非常容易。只需使用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>

运行结果为：

[标题id =“attachment_621”对齐=“aligncenter”宽度=“1024”] 图：精灵图演示

图：精灵地图演示[/caption]

简单来说，精灵图像就是一张大的背景图像。只需使用背景位置移动背景图像，只有部分背景图像可见。到目前为止，精灵地图的发展已经非常成熟，在阿里巴巴、雅虎、谷歌、京东地图、淘宝地图等大型网站上都可以看到精灵地图阴影可以显着减小图像的大小。减少服务器的负载。提高网页加载速度当然，使用精灵也有其缺点：

合并图像时，需要将多张图像有序合理地组合成一张图像，并且每个小图像之间需要留有足够的空间。
如果图像的宽度不足以适应宽屏或高分辨率屏幕上的页面宽度，背景将会破裂。
精灵图维护起来很麻烦，如果页面背景稍有变化，整个精灵图就必须改变。

JSON