-
[深圳|结业弟子]JS-钟俊2
用transform缩放雪碧图是没有问题的,那为什么你的调整会造成图片的偏移呢,
因为是你的transform属性用错了;我们用transform属性调整雪碧图,往往是去
缩放单个的图片的大小,而你可能写的是整体图片的缩放,
举个栗子:
.img1 {
width: 20px;
height: 20px;
background: url(/img.png) -85px -10px;
transform:scale(0.5);
}//解释一下:单个图片宽度,高度,
//图片链接,以及图片在整个雪碧图里的位置
//最后就是transfrom属性了;
如果你不喜欢用transfrom来缩放,其实还可以用zoom属性;
zoom与transfrom:scale还存在一下区别,可以去甄别比较一下:
zoom的缩放是相对于左上角的;而scale默认是居中缩放;
zoom的缩放改变了元素占据的空间大小;而scale的缩放占据的原始尺寸不变,页面布局不会发生变化;
zoom和scale对元素的渲染计算方法可能有差异(需要自己动手,用高清图,仔细去看其中的区别)。
对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制;而scale就是纯粹的对图形进行比例控制,文字50%原来尺寸。编辑于2019-03-26
- 去第 页