首页 > 移动平台 > 详细

sprite图在移动端的使用

时间:2015-06-15 18:34:12      阅读:266      评论:0      收藏:0      [点我收藏+]

 做移动端页面时,设计稿中的切片图片往往是实际的2倍,此处记录图片正常显示大小的技巧。 

 

当图片是单张的话,可以对容器设计实际大小,然后设置background-image,为了让图片缩小一倍,可以设置background-size:contain;

如:图片尺寸是20*20,但是在移动端页面显示的则是10*10,此时,对容器进行设置:

 

#contain{width:10px;height:10px;background:url(images/xx.png) no-repeat 0 0;background-size:contain;} 

 

当图片不是单张的而是一张sprite图,那么首先需要对容易设置于图片一样的大小,然后使用transform:scale(0.5)进行缩放一倍。

#contain{width:20px;height:20px;background:url(images/sprite.png) no-repeat -200px 0;transform:scale(0.5);-webkit-transform:scale(0.5);-ms-transform:scale(0.5);-o-transform:scale(0.5);} 

sprite图在移动端的使用

原文:http://www.cnblogs.com/wmmang-blog/p/4578642.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!