CSS精灵图技术说明

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

“精灵图”，一个有趣的名字。新人需掌握的小重点，下面通过简单粗暴的案列帮助你理解并学会灵活使用

---

使用工具：
“Macromedia Fireworks”，自行下载，可免费试用30天。
图片素材：

• 要求：选出“精灵图”字母缩写
  

一、HTML代码

代码如下：

二、CSS代码

1.样式部分

代码如下：
background:url（“素材图路径”）no-repeat x y

2.如何确认字母大小，偏移距离？

看一遍就记住：

注意左下角参数：高、宽，相对于图片左上角的x、y坐标值

例如划出的 “L”字母：

对照样式中“L”字母高宽xy值

“T”字母对照上表（“J”字母同理）：

最终实现效果图：

---

总结

某些时候，对新人来说，一款合适的工具很重要! 希望这篇文章可以让你看一遍就能够灵活使用“精灵图”! 文章简陋粗暴，没有过多解释，师傅们见谅！