背景图定位_雪碧图入门教程-慕课网

1. 背景图定位

上一小节的代码运行过后看似好像没什么问题，那么我们来给它加上个边框试试：
border
加上边框后发现它其实是有点歪了，偏左上角一点，这是因为background-image属性默认是定位在元素的左上角的。

2. 来看一下定义背景图位置的语法怎么写：

background-position: 你想要的位置;

想要的位置一共可以填两个值，第一个值代表横向的位置，第二个值代表纵向位置，如果省略第二个值默认是居中的。
你想要的位置可以是 top、center、bottom、left、right这种关键字，如：background-position: top right;
也可以是百分比数值，如：background-position: 100% 50%;
还可以是具体的数字单位，如：background-position: 100px 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: 20px;
        height: 18px;

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

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

        /* 边框，便于对比背景图所在位置 */
        border: 1px solid black;
      }
  	</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;

        /* 边框，便于对比背景图所在位置 */
        border: 1px solid black;
      }
  	</style>
	</head>
	<body>
    <div class="sprite"></div>
  </body>
</html>

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

运行结果：
sprite

3. 小结

学会了背景图片的定位就好像学会了一门魔法，用这个魔法可以随意的控制雪碧图的各项图标。

但是这些都是静态的，固定在哪个位置就是哪儿了，如果想让它有一些交互效果的话还是需要动态的去更改背景图的定位。

下一小节我们将模仿百度首页的交互效果来教会大家如何动态更改定位。