1. 背景图定位

上一小节的代码运行过后看似好像没什么问题，那么我们来给它加上个边框试试：

加上边框后发现它其实是有点歪了，偏左上角一点，这是因为background-image属性默认是定位在元素的左上角的。

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

background-position: 你想要的位置;

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

所以这里我们可以给它一个定位值：

运行结果：

3. 小结

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

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

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