雪碧图的使用

简介:现在使用雪碧图的程序员越来越多,不仅从时间方面还是从浏览器的性能等方面都得到了很好的帮助。所以学好雪碧图是必不可少的。关注我,将每日为您更新最新,最实用的知识。

雪碧图的使用步骤如下:

1,确定好雪碧图的图标及大小。

2,测量雪碧图每个图标的大小。

3,根据测量结果,创建一个元素。

4,将雪碧图设为元素的背景。

5,设置一个偏移量,则会显示出您所需要的图片。

回顾一下前面所发布的知识点,背景图background的使用

1,第一步需要将雪碧图以背景图的方式显示出来。

2,第二步设置宽高。

3,第三步设置不平铺。

4,第四步使用定位(background-position:)将雪碧图移至您所需要的指定位置。

5,最后根据您的需要去调整整体页面的布局。

备注:

以上定位向右移是负值,向下移是负值,反之;根据自己的需求去调整就会出来一个完美的小图标啦。

你可能感兴趣的:(前端,雪碧图,前端,css)