css sprites（良好很强大）（zz）
日期：2014-05-17 浏览次数：20593 次
最近，用到这个技术，让我们更深入的了解它吧^^
?
来自：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="min">最小化</div>
这两个class都使用同一个图片：
?
Example Source Code [www.52css.com]
??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]
.min?{?background-position:?0?-400px;}
再次查看效果：
