雪碧图尺寸不吻合时怎么办？_雪碧图入门教程-慕课网

1. 当有一个不吻合页面元素的尺寸时

有时候图片并不都是这么完美的适合你所需要的场景，比如美工给了一套比较大的雪碧图：

图片描述

实际上你并不需要这么大的图标，比如你需要图标的地方大概是55px * 50px：

实例演示

预览复制

<!DOCTYPE html>
<html>
	<head>
    <meta charset="UTF-8">
    <title>CSS Sprites</title>
    <style>
	  /* 清除默认样式 */
      * { padding: 0; margin: 0; }
      
      /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */
      body {
	      height: 100vh;
	      display: flex;
	      align-items: center;
	      justify-content: center;
	  }
      
      .sprite {
        /* 设置宽高和边框 */
        width: 55px;
        height: 50px;
        border: 1px solid black;

        /* 背景图地址设置为雪碧图的位置 */
        background-image: url('http://img.mukewang.com/wiki/5ed9a97108da9a2e04440371.jpg');
        
        /* 禁止背景图重复 */
        background-repeat: no-repeat;

        /* 令背景图显示在正确的位置 */
        background-position: left bottom;
      }
  	</style>
	</head>
	<body>
    <div class="sprite"></div>
  </body>
</html>

<!DOCTYPE html>
<html>
	<head>
    <meta charset="UTF-8">
    <title>CSS Sprites</title>
    <style>
	  /* 清除默认样式 */
      * { padding: 0; margin: 0; }
      
      /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */
      body {
	      height: 100vh;
	      display: flex;
	      align-items: center;
	      justify-content: center;
	  }
      
      .sprite {
        /* 设置宽高和边框 */
        width: 55px;
        height: 50px;
        border: 1px solid black;

        /* 背景图地址设置为雪碧图的位置 */
        background-image: url('http://img.mukewang.com/wiki/5ed9a97108da9a2e04440371.jpg');
        
        /* 禁止背景图重复 */
        background-repeat: no-repeat;

        /* 令背景图显示在正确的位置 */
        background-position: left bottom;
      }
  	</style>
	</head>
	<body>
    <div class="sprite"></div>
  </body>
</html>

运行案例点击 "运行案例" 可查看在线运行效果

运行结果：

图片描述

可以看出来此时由于图标远比盒子大，所以只显示出了一个角，正所谓小荷才露尖尖角。

2. 解决方案

聪明的同学早就猜到了我们肯定有一个能够控制背景图大小的语法：

background-size：图片尺寸;

图片尺寸可以是cover或contain这种关键字
也可以是具体的宽高，如：background-size: 100px 50px;
还可以是百分比，如：background-size: 100% 50%;

此时我们需要把背景图的大小调到一个恰好能够适应盒子宽高的这么一个数值：

实例演示

预览复制

<!DOCTYPE html>
<html>
	<head>
    <meta charset="UTF-8">
    <title>CSS Sprites</title>
    <style>
      /* 清除默认样式 */
      * { padding: 0; margin: 0; }
      
      /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */
      body {
	      height: 100vh;
	      display: flex;
	      align-items: center;
	      justify-content: center;
	  }
      
      .sprite {
        /* 设置宽高和边框 */
        width: 55px;
        height: 50px;
        border: 1px solid black;

        /* 背景图地址设置为雪碧图的位置 */
        background-image: url('http://img.mukewang.com/wiki/5ed9a97108da9a2e04440371.jpg');
        
        /* 背景图尺寸 */
        background-size: 205px 170px;

        /* 令背景图显示在正确的位置 */
        background-position: left bottom;
      }
  	</style>
	</head>
	<body>
    <div class="sprite"></div>
  </body>
</html>

<!DOCTYPE html>
<html>
	<head>
    <meta charset="UTF-8">
    <title>CSS Sprites</title>
    <style>
      /* 清除默认样式 */
      * { padding: 0; margin: 0; }
      
      /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */
      body {
	      height: 100vh;
	      display: flex;
	      align-items: center;
	      justify-content: center;
	  }
      
      .sprite {
        /* 设置宽高和边框 */
        width: 55px;
        height: 50px;
        border: 1px solid black;

        /* 背景图地址设置为雪碧图的位置 */
        background-image: url('http://img.mukewang.com/wiki/5ed9a97108da9a2e04440371.jpg');
        
        /* 背景图尺寸 */
        background-size: 205px 170px;

        /* 令背景图显示在正确的位置 */
        background-position: left bottom;
      }
  	</style>
	</head>
	<body>
    <div class="sprite"></div>
  </body>
</html>

运行案例点击 "运行案例" 可查看在线运行效果

于是就可以把图标完美的呈现出来了：

图片描述

如果雪碧图过大可以调小背景尺寸，反之亦然。

3. 条形图可以使用的语法

假如雪碧图上面所有的图标都一样大的话，建议做成条形图：

图片描述

因为条形图可以有个简便的方法：

background-size: cover;

cover的意思就是用宽高最小的那部分(上图就是高比较小)恰好能填充满整个背景区域。

实例演示

预览复制

<!DOCTYPE html>
<html>
	<head>
    <meta charset="UTF-8">
    <title>CSS Sprites</title>
    <style>
      /* 清除默认样式 */
      * { padding: 0; margin: 0; }
      
      /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */
      body {
	      height: 100vh;
	      display: flex;
	      align-items: center;
	      justify-content: center;
	  }
      
      .sprite {
        /* 设置宽高和边框 */
        width: 55px;
        height: 52px;
        border: 1px solid black;

        /* 背景图地址设置为雪碧图的位置 */
        background-image: url('http:////img.mukewang.com/wiki/5ed9ca5a0973e0d804450108.jpg');
        
        /* 背景图尺寸 */
        background-size: cover;

        /* 令背景图显示在正确的位置 */
        background-position: left;
      }
  	</style>
  </head>
	<body>
    <div class="sprite"></div>
  </body>
</html>

<!DOCTYPE html>
<html>
	<head>
    <meta charset="UTF-8">
    <title>CSS Sprites</title>
    <style>
      /* 清除默认样式 */
      * { padding: 0; margin: 0; }
      
      /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */
      body {
	      height: 100vh;
	      display: flex;
	      align-items: center;
	      justify-content: center;
	  }
      
      .sprite {
        /* 设置宽高和边框 */
        width: 55px;
        height: 52px;
        border: 1px solid black;

        /* 背景图地址设置为雪碧图的位置 */
        background-image: url('http:////img.mukewang.com/wiki/5ed9ca5a0973e0d804450108.jpg');
        
        /* 背景图尺寸 */
        background-size: cover;

        /* 令背景图显示在正确的位置 */
        background-position: left;
      }
  	</style>
  </head>
	<body>
    <div class="sprite"></div>
  </body>
</html>

运行案例点击 "运行案例" 可查看在线运行效果

运行结果：

图片描述

可以看到结果几乎是一样的，但是这种方式就不用我们一点点的去调尺寸，看究竟是哪个尺寸最合适。而且在调试位置的时候我们只需要关心一个方向的位置就可以了，方便了许多。

4. 小结

本小节我们学习了如何改变背景图片的尺寸，学会了这些基础的CSS用法，你就已经可以在网页中使用雪碧图来显示静态图案了。

但我相信你肯定不会满足于静态这两个字，那么接下来就一起来学习一下动画的知识吧！