CSS Sprite介绍和基本说明

这篇文章已经改名字了，今天我将说名CSS Sprite的基本应用

?

CSS Sprite是CSS的基本技术之一，刚遇到的时候没什么感觉，但现在才发现其强大之处

?

参考

http://www.alistapart.com/articles/sprites

下面有常用标签

#panel1b a:hover {    background: transparent url(test-3.jpg)    0 -200px no-repeat;}

background 背景图0 -200px 背景图相对位子no-repeat 背景不重复显示（很重要）
这里我有个小窍门
图片左移 x轴为负图片上移 y轴为负
记住哦

我在介绍一个小工具：SpriteMe
很强大的工具，具体怎么使用请查看官网官网：
http://spriteme.org/

还有一些小例子：
巩固一下：

#web {  width: 17px; height: 17px;  background-repeat: no-repeat;  background-image: url(../img/web.gif); /** sprite-ref: mysprite; */}#logo {  width: 50px; height: 50px;  background-repeat: no-repeat;  background-position: top right;  background-image: url(../img/logo.png); /** sprite-ref: mysprite; sprite-alignment: right */}#main-box {  background-repeat: repeat-x;  background-position: 5px left;  background-image: url(../img/top-frame.gif); /** sprite-ref: mysprite; sprite-alignment: repeat;                                                                                   sprite-margin-top: 5px */}

?