最近，用到这个技术，让我们更深入的了解它吧^^
来自：http://www.52css.com/article.asp?id=735
对啦，下面的图，记得放进素材库哦，将来备用，改个渐变就OK啦^^
CSS Sprites技术早在2005年 CSS Zengarden 的园主 Dave Shea就在ALA发表对该技术的详细阐述。
原先只在CSS玩家之间作为一种制作方法流传，后来出来个14 Rules for Faster-Loading Web Sites，技术人员之间
竞相传阅，其中第一条规则Make Fewer HTTP Requests就提到CSS Sprites。于是这个小妖精就火了起来，甚至出现了在线生
成工具，势不可挡也。近来国内很多blog都提到CSS Sprites，最著名的例子莫过于 google.co.kr 下方的那几个动画。最新发布的
YUI中，也是使用到CSS Sprites，几乎都有的CSS装饰图都被一个40×2000的图包办。社交大站Facebook最近也使用了一个
22×1150的图片承担了所有icon。一时间，CSS Sprites无处不在。
CSS Sprites工作原理
我们知道，自CSS革命以降，HTML倾向于语义化，在一般情况下不再在标记里写装饰性的内容而是把呈现的任务交给了CSS。GUI是缤纷多彩的，少不了各种漂亮的图来装点。新时代的生产方式是，在HTML布满各种各样的钩子（hook），然后交由CSS来处理。
在需要用到图片的时候，现阶段是通过CSS属性background-image组合background-repeat, background-
position等来实现（题外话：为何我提现阶段，因为未来浏览器若支持content则又新增另外的实现方法）。我们的主角是，你一定猜到了，就是
background-position。通过调整background-position的数值，背景图片就能以不同的面貌出现在你眼前。其实图片整体
面貌没有变，由于图片位置的改变，你看到只该看到的而已。就好比手表上的日期，你今天看到是21，明天看到是22，是因为它的position往上跳了一
格。所以你也大概了解到，CSS Sprites一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。
我们使用YUI的sprite.png举个例子，假如我们有这么一段代码，max代表最大化，min代表最小化，我们需要给它们配上相应的漂亮图片（这样我们的网站才能够吸引人）：
Example Source Code
[www.52css.com]
<div class="max">最大化</div>
<div class="min">最小化</div>
这两个class都使用同一个图片：
Example Source Code
[www.52css.com]
.min, .max {
width:16px;
height:16px;
background-image:url(sprite.png);
background-repeat: no-repeat; /*我们并不想让它平铺*/
text-indent:-999em; /*隐藏文本的一种方法*/
}
效果如下：
Source Code to Run
[www.52css.com]
[ 可先修改部分代码 再运行查看效果 ]
我们看到一团灰，没错，因为我们还没有指定background-position，默认为 0 0，可以看下sprite.png，处于这个位置正是
灰块。好了，我们要找到代表最大化的加号和代表最小化的减号的位置找出来。经过测量，最大化按钮位于Y轴的350px处，最小化按钮位于Y轴400px
处。想一想我们如何才能让它们能够显示出来呢，明显，要向上提升sprite.png，得到代码如下：
Example Source Code
[www.52css.com]
.max { background-position: 0 -350px;}
.min { background-position: 0 -400px;}
再次查看效果：
Source Code to Run
[www.52css.com]
[ 可先修改部分代码 再运行查看效果 ]
这一次我们成功了！
CSS Sprites优点
我们从前面了解到，CSS Sprites为什么突然跑火，跟能够提升网站性能有关。显而易见，这是它的巨大优点之一。普通制作方式下的大量图片，现在合并成一个图片，大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。
CSS Sprites缺点
至于可维护性，这是一般双刃剑。可能有人喜欢，有人不喜欢，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐。而且算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。当然，在性能的口号下，这些都是可以克服的。
由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。
前面我们也提到了，必须限制盒子的大小才能使用CSS Sprites，否则可能会出现出现干扰图片的情况。这就是说，在一些需要非单向的平铺背景和需
要网页缩放的情况下，CSS Sprites并不合适。YUI的解决方式是，加大图片之间的距离，这样可以保持有限度的缩放。
CSS Sprites总结
性能压倒一切。CSS Sprites是值得推广的一种技术。尤其适宜用于FIR，比如固定大小的icon替换。为保持兼容性，图片中的各个部分保持一定的距离是一种不错的做法。
分享到：
相关推荐
5. **可定制性**：用户可能有特定的需求，如指定图像排列顺序、选择不同的背景定位方式等，好的CSS Sprites工具应提供这些选项。 6. **版本控制**：随着网站的更新，图像可能会变化。工具应支持版本管理，方便更新...
### CSS Sprites技术详解 #### 一、CSS Sprites技术简介 CSS Sprites技术是一种将多个小图片合并成一张大图的技术，通过CSS背景定位来显示所需的特定小图部分。这种技术可以显著减少HTTP请求次数，提高网页加载...
在网页设计中，CSS Sprites（CSS精灵）是一种高效优化页面加载速度的技术，尤其在处理大量小图时效果显著。通过CSS Sprites，我们可以将多张图片合并成一张大图，然后利用CSS背景定位来显示我们需要的部分，从而减少...
5. **工具支持**：有许多在线工具和自动化库可以帮助生成和管理CSS Sprites，例如SpritePad、CSS Sprite Generator和Compass框架的Sprite Mix插件。这些工具可以自动合并图像并生成相应的CSS代码，简化了开发过程。 ...
**CSS Sprites 知识详解** CSS Sprites是一种网页图像处理技术，用于优化网页加载速度，减少HTTP请求的数量。在网页设计中，如果一个页面上有多个小图标或背景图像，传统方式是每个图像都单独请求，这会增加页面...
程序名称：CSS Sprites 样式生成工具(bg2css) 主要功能：方便使用CSS Sprites时对图片生成样式 安装条件：需先安装Adobe的AIR环境AdobeAIRInstaller.exe，这个我也传到csdn空间了，可以搜索下！
**CSS Sprites 技巧详解** CSS Sprites是一种网页图像优化技术，源于计算机图形学中的精灵技术，旨在减少网络请求次数，提升网页加载速度。它将多个小图像整合到一张大图（称为Sprite图）中，然后利用CSS背景定位来...
**CSS精灵（CSS Sprites）**是一种网页图像优化技术，它允许我们将多个小图像合并到一个大图（称为精灵图）中，然后通过CSS的背景定位来显示我们需要的部分。这样可以减少网页HTTP请求的数量，从而提高页面加载速度...
CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
CSS Sprites 样式生成工具(bg2css) 3.2.1 （需要AIR环境，可到 Adobe站点 下载安装。）
css Sprites精灵图制作。加快网页加载速度 浏览器接受的同时请求数是10个，如果图片过多会影响整体的视觉效果，而且对于不稳定的网络带宽，加载起来更是噩梦，所以把图片拼接为一张大图，从而加快加载速度，以及...
总的来说，"bg2css_1.4.1"这样的工具是CSS Sprites技术的一个强大助手，通过自动化处理，让开发者更专注于网页设计和用户体验优化，而不是繁琐的图像定位工作。正确使用CSS Sprites和相应的工具，可以在提升网站性能...
**CSS Sprites 知识详解** CSS Sprites 是一种网页图像优化技术，通过将多个小图合并到一张大图（通常称为...在现代网页开发中，熟练掌握CSS Sprites的使用和工具的配合，能有效提升网站性能，提供更好的用户体验。
**CSS Sprites 知识详解** CSS Sprites是一种优化网页加载速度的技术，它将多个小图合并成一张大图（通常称为精灵图），然后通过CSS的背景定位来显示需要的部分。这种方法大大减少了网页中HTTP请求的数量，因为...
css sprites把很多小图集成在一张图片上 css sprites把很多小图集成在一张图片上 css sprites把很多小图集成在一张图片上 css sprites把很多小图集成在一张图片上
总的来说，CSS Satyr是一款强大的CSS Sprites生成工具，它的拖放功能、网格系统和自动代码生成等功能极大地简化了CSS Sprites的制作过程，为网页性能优化提供了便利。对于任何需要处理大量小图的项目，CSS Satyr都是...
为您提供CSS Sprites Generator CSS Sprites生成工具下载，CSS Sprites Generator是一款CSS Sprites生成工具，用户只需要点击几下鼠标就可以非常容易地生成CSS Sprites。有效提高了设计师的页面加载效率，操作简单...
CSS Sprites是一项强大的技术，它能够有效地改善网页性能，尤其是在提高加载速度方面。然而，它也有一些局限性和挑战，因此在实际应用中需要根据项目需求和技术限制来进行权衡。随着前端技术的发展，CSS Sprites仍然...
**CSS Sprites 知识点详解** CSS Sprites，又称为CSS精灵，是网页优化的一种技术，通过将多个小图像合并成一个大的图像文件，然后利用CSS的背景定位功能，来显示所需的小图像部分。这种方法减少了HTTP请求的数量，...
CSS Sprites是一种优化网页加载速度的技术，通过合并多个小图像到一张大...随着技术的发展，例如CSS Grid和Flexbox等布局技术，以及对CSS变量的支持，CSS Sprites的使用变得更加灵活，同时也降低了管理和维护的复杂性。