CSS Sprite (CSS精灵)

1. 海外社媒客户开发工具【免费】了，帮你从GG/FB/Ins/谷歌地图上免费获取客户
2. WhatsApp 聊天记录保险：【99元/年】，聊天记录不怕丢。自带翻译、多开，号码抓取、群发
3. 外贸网站搭建、谷歌SEO、社媒运营、企业WhatsApp管理、外贸管理软件、AI应用，【联系我】

也许你遇到过这样的情况，当你看到一个好看的网站，想下载它的图片时，发现下下来的不是一个单独的图片，而是好多图片组合在一起的一张大图片。这就是典型的CSS精灵。

CSS精灵，英文名称CSS Sprite，是一种将网站中的小图片组合成一张大图片在网站中使用的方式。为什么要将小图片组合成大图片呢？主要是为了减少浏览器对服务器的请求次数。因为用户在浏览网站的时候，每次请求都是需要时间的。也许你的网页代码，图片，JS等的下载并不是最占用用户浏览时间的，占用户浏览时间最多的是用户每次的请求时间。html每个请求都要经过TCP协议的三次握手，用http watch观察一下浏览网站的时间构成，就能发现，请求占用的时间还是非常多的。所以，有效的减少http请求的次数是加快网站速度的一个方面。CSS精灵正是通过这个来优化你的网站的。

当然，将所有的小图片组合成大图片，无疑在下载大图时会变慢，此时会对网站的速度带来一定影响。所以，并不是所有网站都适合使用css精灵的。需要衡量使用css精灵带来的利弊，然后再确定是否使用。当然，如果你的网站有很多小图，这些小图组合起来的大图也不大的话，必然很适合使用css精灵进行优化。

CSS精灵的具体操作其实很简单，基本原理就是将组合的大图作为每一个需要小图的控件的背景，然后通过调整背景图片的位置来显示不同的图片。再具体的就不说了，自己网上看一下，很简单的。http://cn.spritegen.website-performance.org/这个网站能够通过上传小图，自动生成大图，并生成了使用的css代码，可以帮你更快的上手css精灵。

1. 海外社媒客户开发工具【免费】了，帮你从GG/FB/Ins/谷歌地图上免费获取客户
2. WhatsApp 聊天记录保险：【99元/年】，聊天记录不怕丢。自带翻译、多开，号码抓取、群发
3. 外贸网站搭建、谷歌SEO、社媒运营、企业WhatsApp管理、外贸管理软件、AI应用，【联系我】

微信扫一扫 或 点击链接联系我

仍有疑问，点击 链接，加个 微信 好友，一起交流。