                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /移动web开发适配秘籍Rem

如果页面好多小图标？做成了雪碧图你这个方法怎么处理？

如果那些小图标都是雪碧图呢？

htoa8000

2018-04-14

源自：移动web开发适配秘籍Rem 4-1

关注问题我要回答

2166

操作

收起

2 回答

whiteosk
2018-09-25

视频中老师的图标只有一个，他应该只是用一个图标给我们作示范，实际上都是雪碧图，可以通过background-position和background-size来设置。比如一张宽40px的雪碧图，第一个图标位于雪碧图左上角可以写成如下，雪碧图的第二个图标则需要自己量取一下第二个图标的开始位置来改变background-position的值

.icon {

display:inline-block;

width:px2rem(21px);

height:px2rem(21px);

background: url("雪碧图") no-repeat;

background-position: 0 px2rem(21px);

background-size:px2rem(40px) auto;

}