码迷,mamicode.com
首页 > 其他好文 > 详细

Sprite 的缩放

时间:2018-09-03 13:45:15      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:url   分享   selector   no-repeat   inf   技术   放大镜   detail   pat   

技术分享图片icon.png  大小为:27*237

假设,我们要获取到 放大境 这个图标,在大图(icon.png)中的坐标为:0,-197。width:11px; height:12px;

如果要截取原图大小,在css中代码如下:

.sprite { background: url(‘imgs/icon.png‘) no-repeat 0 -197px; width: 11px; height: 12px; }

如果要对放大镜这个图标进行缩放,假如放大一倍,代码如下:

.sprite{background: url(‘imgs/icon.png‘) no-repeat 0 -394px; background-size: 54px 474px; width: 22px; height: 24px;}
 
相应的对个参数乘2;其中backgroun-size为大图的尺寸。
 
 

Sprite 的缩放

标签:url   分享   selector   no-repeat   inf   技术   放大镜   detail   pat   

原文地址:https://www.cnblogs.com/jingzeng/p/9577687.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!