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

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

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

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

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

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

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

猜你喜欢

转载自my.oschina.net/kitty0107/blog/1816366