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
做好的图片:
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiIXZ05WZD9CX5RXa2Fmcn9CXwczLcVmds92czlGZvwVP9EUTDZ0aRJkSwk0LcxGbpZ2LcBDM08CXlpXazRnbvZ2LcRlMMVDT2EWNvwFdu9mZvwVP9E0TyUEVkVDZtJGcwJjW1ZVbaZXUYpVd1kmYr50MZV3YyI2cKJDT29GRjBjUIF2LcRHelR3LcJzLctmch1mclRXY39jM1YDOyUzMxETNygDM3EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
这样的好处是 GoPng在css中给出的具体坐标参数,取出使用即可
- 到手的已经是制作好的图片
如下是在网上下载的雪碧图(304X300):
这样可以计算出小图片的尺寸大致为:61X60 因为浏览器以左上角为坐标轴原点,所以可以计算出每个小图片的原点位置,在位置坐标的基础上添加负号,既为background-position的指标 比如手表的原点坐标为:61X120,则其background-position属性为:-61px -120px 最后,记得给图片容器添加尺寸