CSS可以通过设置div的背景图的坐标来控制div背景图片的位置和显示，特别是在制作网站时经常使用。下面我们来详细了解一下它的实现方法。 使用background-position属性指定背景图的坐标 CSS中，可以使用background-position属性来指定背景图片的显示位置。其中，background-position的值由水平坐标和垂直坐标组成，如下所示： background-position: X Y; 其中X和Y代表水平和垂直方向的位置，可以使用像素、百分比、关键字（top、bottom、left、right、center）等作为单位。如果只指定一个值，则另一个值默认为center。 示例代码如下：

div {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  background-image: url("bg.jpg");
  background-position: 50% 50%;
}

上述代码中，我们用width和height指定了这个div的宽高，并用border属性设置了边框。背景图片使用了相对路径的方式，并通过background-image指定，可以根据实际情况指定不同的图片。background-position则将背景图片设置在了div的中心位置。 使用背景图坐标实现按钮状态变化效果 除了控制背景图片的位置，background-position还可以用于实现按钮状态变化的效果。比如，我们可以通过改变背景图的坐标值，使按钮产生不同的按下效果、悬停效果。 下面是示例代码。

.btn {
    width: 100px;
    height: 40px;
    border: none;
    background-image: url("samllBtn.png");
    background-position: 0 0;
}
.btn:active {
    background-position: 0 -40px;
}
.btn:hover {
    background-position: 0 -80px;
}

在上述代码中，我们首先定义了.btn样式，作为按钮元素的默认样式，其中background-position的初始值为0 0。当按钮被点击后，我们使用.btn:active选择器将background-position的垂直坐标值改为-40px，使按钮看起来被按下去了。当鼠标悬停在按钮上时，我们使用.btn:hover选择器将background-position的垂直坐标值改为-80px，变化成了另外一种状态。 小结 本文介绍了CSS中如何通过background-position属性来设置div的背景图片的坐标，以及如何使用这个属性实现按钮状态变化等效果。掌握这些技巧可以让我们在Web开发中更加灵活地运用CSS来实现各种需求。