sprite图片的处理
为了合并图片请求我们经常会用到sprite技术。在rem布局方案下,使用contain或cover来缩放背景图片就无法奏效了。因为元素的背景其实是sprite图片的局部,contain和cover只能对整张图片进行缩放,没办法控制到局部的大小。
比如有如下一张200*50的sprite图。
image
所以在处理sprite图片时,我们只能给background-size取具体值。那么这个值取多少呢?其实只要写我们切出来的图片的实际尺寸就行。
比如我们的元素为5050px,sprite图片为20050px,那css应该如下:
#cpt{
width: 0.5rem;
height: 0.5rem;
background-image: url(cpt.png);
background-size: 2rem 0.5rem;
}
然后修改background-position我们就可以取到sprite上的其他图片了。background-position也取具体值,也是按照切出来的图的尺寸就行。