CSS Sprite引见和基本说明
日期：2014-05-17 浏览次数：20807 次
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 */
}
?
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
