雪碧图在代码中应该怎么写

你好同学 , 给你举一个小例子：

雪碧图就是把很多小图标放在一张图片中。在ps中打开图片测量一下要使用图标的位置 .例如如下:

要使用第三个图标

它的background-position 属性值是根据是铃铛在雪碧图的位置 :

也就是铃铛距离雪碧图左边和上边的位置 , 同学可以使用ps测量一下 . 如下 :铃铛距离左边0px , 距离上边44px. 

所以要想铃铛移动显示在元素上边 ,需要向上移动44px , 所以需要设置负值 , 如下设置:

测量可以使用如下，矩形在绘制的时候就能查看宽高（ps是阶段1，前端基础入门课程里面的哦）

不过目前图标比较流行使用iconfont，使用雪碧图的已经减少了。在后面阶段的案例中会涉及到iconfont的使用哦，简单了解一下。祝学习愉快，望采纳。