CSS Sprites 图片整合技术
论坛上提到这样的问题：“css中用一张背景图做页面的技术有什么优势？”
简单介绍一下 CSS Sprites 的优点：
当用户往U盘中拷200张图片，会等很久。但是如果弄成一个文件，再拷贝就会快很多。
CSS Sprites 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。
实现方法：
- 首先将小图片整合到一张大的图片上
- 然后根据具体图标在大图上的位置，给背景定位。background-position:-8px -95px;
相关日志：
数据备份的重要性 »
06/08/2009 at 18:10
- -！ 总是能在你的BLOG里学到东西
回复
06/09/2009 at 11:42
有你说的这简单说好了，CSS Sprites难点你都没讲到，小图片该怎么整合，怎么排列。这才是CSS Sprites的技巧所在。
回复
六月 9th, 2009 at 12:35
1.小图片排列方面：颜色相近的图片放在一起，可以减少输出的色数，进一步降低文件体积。
2.整合图片生成方面：PNG8的图像比GIF图像要小30%左右
3.通过工具再压缩：fireworks生成的PNG比photoshop更小，而一些专用的压缩软件也可以让图片再小一些。
我个人来讲，也是直接把小图片堆到一起。并没有再按照以上的步骤进行处理。整合后的图片本身已经很小，再耗费很大精力去压缩，感觉意义不大。（主要还是懒，嘿嘿……）
CSS Sprites 涉及的方面很多，我考虑的不是很周全，如果有遗漏，请补充。
八月 7th, 2009 at 15:39
06/09/2009 at 16:42
恐怕不是随便都可以排吧，一般icon都是文字前面的图标，你给定位好了，后面的图标也显示出来了。怎么隐藏多余的图标呢?
回复
六月 10th, 2009 at 9:43
本站已经应用了该技术，
http://uicss.cn/wp-content/themes/myblog/images/icon.gif
定位设置好，不存在其他的图标。
六月 12th, 2009 at 11:07
看了你的图片排放顺序，博主所有图标都是竖排排列的，可以像你给出的示例那样横排排列吗？
自己也用过CSS Sprites，一般都是在需要实现图标+文字的效果，横排排列图标的话，后面的图片也会显示出来，可以像你示例那样用横排图片解决这种问题吗？
六月 12th, 2009 at 13:37
可以横排排列的，例如新浪的做法：
http://i3.sinaimg.cn/dy/deco/2009/0430/sinahome_1113_ws_006_tex.gif
你所说的那种情况，需要控一下高宽，并设置超出部分隐藏。
另外，做技术不用考虑太多，横着排或者竖着排都可以，怎么实现简单就怎么弄。
六月 15th, 2009 at 14:05
图标+文字的效果,图标一般都是用背景来实现的。
假如文字的宽度很长的时候，横排的图标，是不是中间也要空很长的位置呢？
不知道这样说能明白不。
除非不用背景。用
六月 15th, 2009 at 15:24
美图秀秀的说法应该是一个方法；
另cuikai兄说的控制一下高度，和超出部分隐藏，是不是说在写CSS的时候，要用到overflow：hidden这个属性呢？
06/09/2009 at 22:57
节省这么点贷款却为网页设计人员增加了很多麻烦，拖慢开发进度。灵活性也不太好。
回复
六月 10th, 2009 at 9:41
如果流量巨大（互联星空日流量3000万IP左右），在前端偷懒，等于给服务器端增加压力。
为了偷懒，多出来的几个线程，需要增加服务器来分解压力，岂不是更麻烦？
而且我们这里多花一点时间，每个用户打开页面速度都会快一点点，几千个用户累积节省的时间不是小数字。
六月 10th, 2009 at 10:42
嗯，如果访问量巨大的大型网站使用这个技术还是有不少好处的。但是这样的网站不多吧。
七月 2nd, 2009 at 8:50
到处都是。你去看看现在大点的网站都是这样。
小网站这些都没意义。
大网站开发进度不是什么问题。问题在于产品。
八月 7th, 2009 at 15:50
可以访问一下adidas官网，官网菜单就用了这样的技术。有空可以看一下代码。
06/11/2009 at 16:13
这个很好用，请看看QQ的首页。
这个就是QQ的背景图片 http://mat1.qq.com/www/iskin/skin1/skin1.gif
回复
06/17/2009 at 10:46
回复
06/18/2009 at 16:34
这个是个好方法,大型门户网站都是这么干的
回复
06/22/2009 at 17:45
大家讲的都很好，很值得我学习！谢谢！
回复
07/07/2009 at 13:39
问题是这个图片定位的问题，要怎么找，有没有相关教程呢？
回复
07/18/2009 at 10:00
一般简单的图，用工具就可以合并了；而作为整页的图一起合并，不是三两句说得清的
回复
08/27/2009 at 15:12
回复
08/28/2009 at 17:29
相当有用.
回复
10/01/2009 at 22:07
就是不知道怎么算图片位置,,郁闷!~~
回复
十一月 10th, 2009 at 17:11
1：你先用Photoshop软件，把所有的小图标都整合到一张图片里，至于怎么排列图标你自己感觉怎么爽就怎么排。
2：图片整合好后，在Photoshop软件里可以看到每张小图标的坐标。方法如下：
在小图标的左上角起始点选择一像素的高宽，选择好后把鼠标移到选区上，在信息里就可以看到图标的X轴和Y轴的坐标。这个坐标就是图标的位置。
其它图标的位置也是用这样的方法去算，这样是麻烦了点，不过做前端就是要有耐心，尤其是使用CSS Sprites 技巧更需要耐心。如果你在整合图片的时候掌握好技巧，只要知道第一个图标的坐标，其它的都可以直接算出来了。自己领悟去吧，^_^
说明：一张大图片里的每个小图标的位置，都是以每个小图标的左上角的起始点为该图标的坐标位置
10/04/2009 at 23:32
有了整合，那怎么拆分？
回复
十月 5th, 2009 at 8:11
用剪刀在显示器上划……
11/02/2009 at 23:13
[...] 参考：http://uicss.cn/css-sprites/ [...]
11/27/2009 at 20:05
[...] CSS Sprites 图片整合技术 将所有的圆角边框汇聚到一张PNG图片上（PNG兼容），然后外框加“相对定位 [...]
01/01/2010 at 14:25
看了博主的文章和大家的讨论，又学到新知识了^
回复
01/01/2010 at 16:24
博主写的不错，受益匪浅，学习了
回复
03/12/2010 at 17:42
那如果说我要在后面添加小图标
那这样岂不是很麻烦？
回复
三月 12th, 2010 at 22:06
既然选择了这份工作，就不要怕麻烦。况且熟练之后，这就仅仅是一个算坐标的简单数学问题。
08/05/2010 at 17:55
大网站一定要这样做，企业类网站就算了，浪费时间。
回复
09/27/2010 at 17:14
图片拼一起好解决，就是拼好后图片对应的坐标不好整理出来，ps中看到的像素坐标，怎么弄成百分比？用百分比可以缩放。
回复
12/17/2010 at 16:25
[...] 经常复用的，像背景图、按钮、LOGO，可以采用CSS Sprites将图片做合并操作。 [...]
12/26/2010 at 21:31
很是受益匪浅，LZ超人！呵呵！
回复
07/08/2011 at 11:23
[...] 减少HTTP请求次数 合并图片、CSS、JS，改进首次访问用户等待时间。 [...]
10/02/2011 at 22:36
这个就是做游戏时把所有帧做到一块啰，再分割
回复
10/11/2011 at 15:58
[...] 减少HTTP请求次数 合并图片、CSS、JS，改进首次访问用户等待时间。 2. 使用CDN [...]
12/24/2011 at 15:24
[...] 1. 减少HTTP请求次数 合并图片、CSS、JS，改进首次访问用户等待时间。 2. 使用CDN [...]
02/03/2012 at 11:15
[...] 1. 减少HTTP请求次数 合并图片、CSS、JS，改进首次访问用户等待时间。 2. 使用CDN [...]
03/19/2012 at 12:32
[...] 减少HTTP请求次数 合并图片、CSS、JS，改进首次访问用户等待时间。 2. 使用CDN [...]