背景与边框

background-image 属性可以在一个元素的背景中显示一个图像。在下面的例子中，我们有两个盒子，其中一个盒子具有比盒子大的背景图像（balloons.jpg），另一个盒子具有较小的单个星星的图像（star.png）。

这个示例演示了关于背景图像的两种情形。默认情况下，大图不会缩小以适应盒子，因此我们只能看到它的一个小角，而小图则是平铺以填充方框。在

如果除了背景图像外，还指定了背景颜色，则图像将显示在颜色的顶部。尝试向上面的示例添加 background-color 属性，看看效果如何。

background-repeat 属性用于控制图像的平铺行为。可用的值是：

在下面的示例中尝试这些值。我们已经将值设置为 no-repeat，因此你将只能看到一个星星。尝试不同的值（repeat-x 和 repeat-y），看看它们的效果如何。

在上面的例子中，我们有一个很大的图像（ballons.jpg），由于它比作为背景的元素大，所以最后被裁剪掉了。在这种情况下，我们可以使用 background-size 属性，它可以设置长度或百分比值，来调整图像的大小以适应背景。

你也可以使用关键字：

在下面的示例中，我使用了上面示例中的 balloons.jpg 图片，并使用长度单位来调整方框内的大小。你可以看到这扭曲了图像。

试试这些：

background-position 属性允许你选择背景图片出现在它所应用的盒子上的位置。这使用了一个坐标系统，其中方框的左上角是 (0,0)，方框沿水平（x）和垂直（y）轴定位。

备注： 默认的 background-position 值是 (0,0)。

最常见的 background-position 值有两个单独的值——一个水平值后面跟着一个垂直值。

你可以使用像 top 和 right 这样的关键字（在 background-image 页面上查找其他的关键字）：

css

或者使用长度和百分比值：

css

你也可以将关键字与长度或百分比混合在一起，在这种情况下，第一个值必须指水平位置或偏移，第二个值指垂直位置。例如：

css

最后，你还可以使用四值语法来指示到盒子的某些边的距离——在本例中，长度单位是与其前面的值的偏移量。所以在下面的 CSS 中，我们将背景定位在距顶部 20px 和右侧 10px 处：

css

使用下面的示例来处理这些值并在框内移动星星。

备注： background-position 是 background-position-x 和 background-position-y 的简写，它们允许用户分别设置不同的坐标轴的值。