html精灵图坐标如何确定,css sprites怎么定位？

css sprites(精灵图)，也被称为“CSS图像拼合”、“CSS贴图定位”或“CSS图片精灵”、“CSS雪碧图”，是一种网页图片应用处理方式：将多个图像组合成单个图像文件以在网站上使用的方法，以提高性能。

css sprites(精灵图)其实就是把一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

css sprites怎么定位？怎么用？

css sprites(精灵图)其实就是通过将多个图片融合到一张图片文件中，然后通过CSS background背景定位技术技巧布局网页背景。在需要用到图片的时候，现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现图片的显示。

使用时，需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位。

在使用精灵图之前，我们需要知道精灵图中各个图标的位置。

从上面的图片不难看出Sprites(精灵图)中各个小图标(icon)在整张Sprites(精灵图)的起始位置，例如第一个图标(裙子)在精灵图的起始位置为 x：0，y：0，第二个图标(鞋子)在精灵图的起始位置为 x：0，y：50px，第三个图标(足球)在精灵图的起始位置为x：0，y：100px，依次类推可以得出各个图片相对于精灵图的起始位置。

代码示例：

.box {

width: 600px;

height: 300px;

border: 3px solid #ccc;

background-color: #8064A2;

}

span {

display: inline-block;

width: 25px;

height: 25px;

border: 3px solid #ccc;

background-image: url(css/img/sidebar.png);

background-repeat: no-repeat;

margin: 5px;

}

.icon1 {

background-position: 0 0;

}

.icon2 {

background-position: -40px 0;

}

.icon3 {

background-position: 0 -25px;

}

.icon4 {

background-position: -40px -25px;

}

效果图：

css sprites(精灵图)的作用可以减少对服务器的调用、减少呈现网页所需的下载次数，节省带宽并缩短用户端的下载时间，减少网络拥塞。

可以很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

更多web开发知识，请查阅 HTML中文网 ！！