css-sprites简单使用

1、雪碧图制作工具

腾讯：GoPng ；百度：fis

本人使用GoPng制作雪碧图，步骤简单自行百度。

2、雪碧图使用

雪碧图使用的方式很简单，通过改变标签background-position坐标位置实现显示不同图片  。

如下是一个css样例：

.div1 {
    width: 61px;
    height: 60px;
    float: left;
    background-image: url("img/sprites.jpeg");
    background-position: -0px -0px;
}
从此可以看出，使用的关键是正确计算position坐标，下面给出两种方式下计算方法
  
  
使用GoPng制作的sprites
做好的图片：

          

这样的好处是 GoPng在css中给出的具体坐标参数，取出使用即可

         

•        到手的已经是制作好的图片

        如下是在网上下载的雪碧图(304X300)：

这样可以计算出小图片的尺寸大致为:61X60

因为浏览器以左上角为坐标轴原点，所以可以计算出每个小图片的原点位置，在位置坐标的基础上添加负号，既为background-position的指标

比如手表的原点坐标为:61X120,则其background-position属性为：-61px  -120px

最后，记得给图片容器添加尺寸