css sprite与background-size结合实现背景图片等比缩放

实际开发中，因为要兼容不同分辨率设备我们的sprite图片可能需要不同的尺寸，比如下面图片我们要用“活动车辆”这个标签，分别需要原图大小和缩小一半之后的图片

如果是单独的图片很好处理，但我们这是一个css sprite处理起来就麻烦一点

我们用到了background-size属性

原图中“活动车辆”的大小是44px*30px,background-position是0px -20px

缩小一半变为22px*15px;background-position是0px -10px

具体写法为：

 

img就是原图大小

 

img1就是缩小一半之后的大小

=============================================================

那么为什么这么写呢？

background-size是用来设置背景图像的尺寸的，即高度和宽度，第一个值设置宽度，第二个值设置高度

整个css sprite原图的大小是44*205，缩小一半之后是22*102，如果background-size用数值来设置可以设为background-size:22px 102px;这两个值当中有一个设置为auto也可以。

如果想用百分比设置background-size那我们需要注意，百分比指的是以父元素为基准

 

.img2{width:44px;height:15px;background:url("image/sprite.png") 0 -10px no-repeat; background-size:50% auto;}

注意img2的宽度为44px，这样写就ok了