雪碧图的使用

187 阅读 0 评论 124 点赞

我是靠谱客的博主满意过客，这篇文章主要介绍雪碧图的使用，现在分享给大家，希望可以做个参考。

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

雪碧图的使用步骤如下：

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

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

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

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

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

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

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

2，第二步设置宽高。

3，第三步设置不平铺。

4，第四步使用定位（background-position：）将雪碧图移至您所需要的指定位置。

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

备注：

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

以上就是满意过客最近收集整理的关于雪碧图的使用的全部内容，更多相关雪碧图内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。