css雪碧图如何调整大小

1、通过transform: scale(0.5);来缩放，但在本身有过渡或动画时，刷新页面会有卡顿拉伸现象！不建议这样做！

2、直接调整雪碧图background-size大小

例如，雪碧图规格140*840，但是我们只需要width:42px、height:20px（只是容器的宽度，不是直接设置雪碧图的宽高哦！相当于我们人在房子里，只能看到窗户开放给我们的景象，其他的是看不到的，在这里具体就是，只能看到雪碧图140px*840px的冰山一角），这时，我们需要写以下样式：

1. width: 42px;
2. height: 20px;
3. background-image: url('./icon.png');  // 请注意！！！background-position必须在background-image之后写才能生效
4. background-size: 42px 252px;（X、Y方向），这是雪碧图中，我们需要的实际背景图片大小，他是雪碧图规格的除数，140*840他们同时除以10得到14*84, 然后同时*3得到42*252 // 注意 必须保持与原始规格140*840的比例！为什么一定要是雪碧图规格大小的倍数呢？因为这样是为了等比例缩放雪碧图，防止拉伸，因为雪碧图可能原本大小是UI设计师要求的几倍大，这个时候就需要缩小了不是？  具体多少倍数，看UI设计师的具体要求
5. background-position: 0 -147px; // 这是雪碧图中，我们需要的图标的位置坐标

 

background-position为什么会出现负值？

上篇文章讲到了雪碧图，其中小机器人抖腿的动作设置了图片的background-position：-640px 循环到-1200px，那么这个数值是如何得出来的？下面具体分析一下如何计算background-position的数值。

 

分析素材

下面这张雪碧图是今天的分析素材，尺寸为273*71，单位是px：

 

概念

background-position：设置背景图像的起始位置。

 

实验分析

html代码：设置一个box用于显示图片。

 

1	<div class="box"></div>

 

css属性设置：

1 2 3 4 5 6 7 8 9 10

.box{            margin-top: 50px;            margin-left: 50px;            width: 500px; /*box的宽度 远大于雪碧图宽度*/            height: 71px; /*box的高度 和雪碧图高度一致*/            background-image: url(../img/jingling.png); /*将雪碧图置为背景*/            background-repeat: no-repeat; /*设置背景不重复*/            background-color: #aaa;            background-position: 0px 0px; /*设置背景图起始位置为0px 0px */        }

　　此时界面显示如下：这说明，当 background-position坐标设置为0 0，雪碧图起始位置是和box起始位置重合的。

  接着设置属性，图片显示如下：

1	background-position: -91px 0px;

我们发现，box起始位置变成了雪碧图的第二张开始。此时再回过头来看看background-position概念：设置背景图像起始位置。把box想象成一个向下向右为正的坐标系，并且box位置保持不动。那么 -91px是该雪碧图在X轴起始位置，可以看到雪碧图的第一帧已经超出box的正坐标系了，所以它看不见了。始终记住一个概念，background-position设置的是雪碧图相对于盒子的起始位置。

由此分析一下上一篇的雪碧图位置设置：

• 机器人雪碧图总共1280*80px，也就是一帧是80*80px。
• 小机器人的抖腿动作在easy-in进场动画结束之后，此时雪碧图停在最后一帧图上面，也就是有15帧图在坐标系左边，是看不见的。
• 注意此时要开始机器人抖腿动画，也就是从雪碧图的第9张到第16张执行帧动画。
• 要把第九帧图显示在坐标系 （0,0）位置，那么雪碧图X轴的起始位置就应该是 -640px，要把第16帧显示在（0,0）位置，那么雪碧图的起始位置就应该是-1200px（保留最后一帧在x轴右边，否则就看不见了）。

坐标值如图所示：

 

结论

始终记住一个概念，background-position设置的是雪碧图相对于盒子的起始位置。

 

至此，你明白background-position为什么设置为负值了么？