接下来我们将深入理解 background-position 属性。我们已经知道，background-position 用来定义背景图像的位置，缺省值定义在宿主元素的左上角，XY坐标点是 {0,0}。设置背景图像的位置，一般需要XY坐标一同设置，以确保精准定位。但这不意味着不能用单数值设置 background-position 属性，当使用单数值时，比如设为 left 或 20%，浏览器会认为这是X坐标点，Y坐标则自动设为 center，也就是说，单数值的 background-position 属性值指向X方向，Y方向使用 center 作为默认值，而不是缺省 background-position 时的 0 这个值。以下是我编写的一个设置背景图片位置的示范，点击相应按钮，会令背景图像按照按钮的字面意设置背景图像的位置：

background-position 是一个属性，绝大多数的CSS属性都可以拿来做动画。让我们试试看：利用 background-position 的关键字属性值，即 left、top、right、bottom 和 center 做一个CSS关键帧动画，点击这里观看效果。

大家可能对这组关键帧动画感兴趣，那就来看看CSS代码，以加深对 background-position 的关键字属性值的认识：

本节就先讲这些，background-position 还有一些内容值得继续探讨，敬请期待。