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

来源：互联网发布：魔兽世界mac配置要求编辑：程序博客网时间：2024/04/26 22:17

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

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

我们用到了background-size属性

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

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

具体写法为：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        .img{width:44px;height:30px;background:url("image/sprite.png") 0 -20px no-repeat;}        .img1{width:22px;height:15px;background:url("image/sprite.png") 0 -10px no-repeat; background-size:22px auto;}    </style></head><body><div class="img"></div><div class="img1"></div></body></html>

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了

0 0