动态变更背景图位置_雪碧图入门教程-慕课网

1. 模仿百度效果

百度的网站是每当鼠标放在相机图标那个位置的时候，相机就会切换到蓝色：
图片描述
我们来模仿一下这个效果：

实例演示

预览复制

<!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: 20px;
        height: 18px;

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

        /* 令背景图显示在正确的位置 */
        background-position: top;
      }

      /* 当鼠标移入时的样式定义 */
      .sprite:hover {
        /* 令背景图显示在正确的位置 */
        background-position: 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: 20px;
        height: 18px;

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

        /* 令背景图显示在正确的位置 */
        background-position: top;
      }

      /* 当鼠标移入时的样式定义 */
      .sprite:hover {
        /* 令背景图显示在正确的位置 */
        background-position: bottom;
      }
  	</style>
	</head>
	<body>
    <div class="sprite"></div>
  </body>
</html>

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

运行结果：

图片描述

可以看到，只要改变一下背景图的位置，就可以切换到另一个不同的图标，只要位置控制得当，一张雪碧图就可以显示出各式各样不同的图标，是不是很神奇呢？

2. 更加直观的理解

如果有些同学并没有能够理解的话，我们可以给背景加上一个过渡动画，方便大家理解究竟是如何切换图标的：

实例演示

预览复制

<!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: 20px;
        height: 18px;

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

        /* 令背景图显示在正确的位置 */
        background-position: top;
        
        /* 为背景添加过渡动画 */
        transition: background .3s;
      }

      /* 当鼠标移入时的样式定义 */
      .sprite:hover {
        /* 令背景图显示在正确的位置 */
        background-position: 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: 20px;
        height: 18px;

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

        /* 令背景图显示在正确的位置 */
        background-position: top;
        
        /* 为背景添加过渡动画 */
        transition: background .3s;
      }

      /* 当鼠标移入时的样式定义 */
      .sprite:hover {
        /* 令背景图显示在正确的位置 */
        background-position: bottom;
      }
  	</style>
	</head>
	<body>
    <div class="sprite"></div>
  </body>
</html>

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

运行结果：

图片描述

可以看到其实就是这么个原理，两张形状一样但颜色不一样的图形放在一张雪碧图中，然后再控制位置即可。

3. 小结

就是在页面上加入了这么一个动态的效果，页面才不会显得那么平静如水。

有趣的交互效果能让你的页面熠熠生辉、锦上添花。

但并不是所有雪碧图的尺寸都能这么完美的贴合元素，下一小节我们将告诉大家应该如何调节背景图片的大小以适应页面元素。