什么是精灵图
所谓的精灵图就是将多个图片放置在一个大的图片上面。精灵图主要是用来当做背景图时使用，之所以要将多个图片放置在一个大的图片上面是因为很多时候我们的背景图是放置在服务器上面的，当我们需要使用到某一张图片的时候就会向服务器请求资源，如果图片是分离的那么用到一张的时候就要请求一次，这样服务器的压力会比较大，所以可以将多个图片整合到一个图片的上面，这样当请求资源的时候请求的次数就会变少很多，可以减轻服务器的压力。
精灵图的使用
精灵图的使用主要是用到了定位的功能，因为是多个图片放置到一张大的背景图中，所以想要在特定的位置使用某一个特定的图就需要用到定位。对于精确的位置可以通过firework软件里面的切片功能获取。
原来的包含多个图片的大图片
现在我想要在页面中显示小旗子哪张图片，可以将这张图导入到firework中，页面如下：
通过上面的图可以到主要有两部操作，第一步是通过切片工具选中我们想要显示的那部分图（本例中是旗子），当选中之后再左下角会出现两组数据，左边是宽和高，这里的宽和高表示的是我们选中的图的宽和高，后面的x和y表示的我们选中的图在这整个背景图中的位置(起点是左上角。x坐标是往左，y坐标是往下)，通过上图可以看到x轴的值是0，y轴的值是183px。
案例代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.one {
background: url("images/index.png") no-repeat 0 -183px;
width: 30px;
height: 30px;
}
.two {
background: url("images/index.png") no-repeat 0 -350px;
width: 236px;
height: 106px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
显示效果
上面的例子中第一个就是小旗子，第二个显示的是另外一张图，具体的参数获取方式依然是通过firework切片工具来获取，只是需要注意的是代码中y轴的数值都是写的负数，是因为上面已经说过，y轴是向下的，我们想要显示这个图片就是需要将图片往上移动，所以移动的值是负值。
3516
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
