css精灵-将多个图标截在一个大图中并在页面正常显示

2019独角兽企业重金招聘Python工程师标准>>>

前端切图过程中有时会需要将图片引入到网页中，但是图标比较多而且小截取不太方便，可以使用以下方法将所有图标都截取下来，并让它们都在页面正常显示：

1.在html代码页面找到需要放图标的位置，在这个位置加入一个空标签，给它设置display：inline-block,或者block，目的是让图标显示在这里，所以这个标签需要能够设置宽高，不能用inline，如果需要让图标与其它元素显示在同一行就用inline-block,否则用block.

2.给标签设置宽高，宽高的大小也就是图标需要显示的大小.

3.给该元素设置背景图片，就是截取下来的大图.

4.调整背景图的位置background-position:x y;使图标刚好显示在空标签里。如果多个图标横着排列就改变x轴值，y轴不变。反之改变y轴值，x轴值不

5.适当调整背景图的大小background-size:?%;使之写设计稿相吻合.

 

转载于:https://my.oschina.net/kitty0107/blog/1816366