CSS精灵图的完整指南

一、什么是CSS精灵图?

CSS精灵图是一种通过将一个大图拆分为若干个小图标或者小图片，通过CSS样式的背景图层叠来任意控制背景图片显示区域，以减少HTTP请求的一种技术手段。

要点：

1. 减少HTTP请求
2. 多个小图片合并为一个整图
3. 使用CSS背景图层叠控制显示区域

.sprite {
    background: url(images/sprite.png) no-repeat;
}
.logo {
    background-position: -2px -458px;
    width: 196px;
    height: 56px;
}
.cart {
    background-position: -95px -398px;
    width: 32px;
    height: 33px;
}

二、 CSS精灵图的优点

CSS精灵图在前端开发中的使用有很多优点:

1. 减少HTTP请求数：从而减小服务器负担、缩短前端页面的加载时间。
2. 加快页面的渲染速度：
(1). 减少了HTTP请求，从而减少了网络请求带来的延迟时间。
(2). 减少页面资源的请求次数，从而减小了TCP慢启动的开销，减少握手带来的时间和资源消耗。
3. 简化CSS样式的设定：因为可以自由定位图标在整张图片的任意位置，所以在设定样式的时候没有了对多张图片样式定位的麻烦，而且也更加灵活，方便调整，提高开发效率。
4. 减少了图片的文件大小：因为可以把多张小图片合并成一张，减小了总文件需要的空间大小，从而减小了页面的整体体积。也因为减小了图片所占据的空间，页面出现滚动条的机会也更小了。

三、 CSS精灵图的缺点

CSS精灵图还有以下缺点:

1. 难以维护：由于如果要更改其中一张图片需要重新生成整张CSS精灵图，并且修改相关CSS代码，如果没有好的命名规范和管理体系，操作会非常不兼容及困难。
2. 无法在内联样式中使用背景：CSS精灵图只能在CSS中使用，而无法在内联样式中使用，因为内联样式必须用到html标签的style属性，而style属性无法识别CSS的背景属性。
3. 要求每个图标的大小和位置一致：如果图片的大小或者位置不同，那么在CSS精灵图中样式的设定会相当的困难，即使设定成功，效果也十分的不美观。
4. 无法利用浏览器的缓存：每次请求CSS精灵图都会将整张图片重新拉取回来，不利于重复使用和利用浏览器的缓存。但注意，如果精灵图中的图片有改动，由于整张图片变更而导致css精灵图的缓存失效，即使没有改动到具体的图片，还是会重新加载。

四、如何使用CSS精灵图

CSS精灵图的使用步骤如下：

1. 准备好需要的小图片。注意要求每个图标的大小和位置一致，可以使用工具如Photoshop等。
2. 将所有小图片合并为一份整图，命名为sprite.png，并保留一个生成的样式表sprite.css。
3. 编写样式,将小图标中需要的部分引入样式。
(1). 设定精灵图片整体样式。
(2). 设定小图标在精灵图片中的位置和大小、背景颜色或状况等。

五、如何创建CSS精灵图

下面介绍3种主要的Sprite生成技术：

1. 手动制作增量式或全量式样式表。
制作方法：
(1) 设计图中需要连续的小图标固定在同一行；
(2) 设置横截面的行数；
(3) 通过计算和工具来划分小图标的大小以及注意它们的间距；
(4) 手写CSS样式。
适用场景：
多了不必要的占用生产力时间而少用。
2. 使用Sprites Generator工具：可以自动化制作相关的样式表就不用再手写CSS。
此技术生成的样式表可能会很膨胀。
3. 使用Compass、SASS、LESS预处理器做Sprites制作。

@mixin sprite($icon-sprite) {
    background-position: $icon-sprite * -60px;
    background-image: url(/path/to/sprite.png);
    width: 50px;
    height: 50px;
}
.element {
    @include sprite(2); //调用第二个位置的小图标
}

六、CSS精灵图的应用场景

CSS精灵图简化了对网页和应用程序的Web设计过程，特别是节省了Web格式的Excel图标的宝贵时间。
精灵图特别适合于变化不大的网页和应用程序，比如：

1. 网站Logo
2. 社交网络图标
3. 动态标志按钮
4. Twitter、Facebook上的分享按钮
5. 表情符号
6. HTML5 Video播放器的控制按钮
7. 4G、wifi、云、热点等信号图标等等。

七、总结

通过本文的阐述，我们了解了什么是CSS精灵图，它的优点和缺点，以及它的应用场景和如何使用，掌握了制作技术和常用的工具。在实际工作中，我们需要在多方面考虑，对于多张小图片，我们需要明确是否需要组成一个精灵图，是否需要完全合并图片组成一个精灵图和选择合适的工具等方面考虑，最终提高前端开发的效率，加快页面的渲染速度，提升用户体验。

原创文章，作者：PXZHR，如若转载，请注明出处：https://www.506064.com/n/332999.html