CSS | background-position 属性

CSS的 background-position 属性用于设置背景图片的位置。

语法

selector {
   background-position: x-position y-position;
}

其中，x-position 和 y-position 可以是以下任意值：

• top
• bottom
• left
• right
• center
• 百分比值
• 像素值

如果只提供了一个值，则将此值视为水平位置，垂直位置将为 center。

示例

以下示例演示了如何使用不同值来设置背景图片的位置。在这个例子中，背景图片是一个灰色的矩形。

div {
  width: 300px;
  height: 200px;
  background-image: url("gray-rectangle.png");
  background-position: top left; /* 将背景图片放在容器的左上角 */
}

div.center {
  background-position: center; /* 将背景图片放中心位置 */
}

div.bottom-right {
  background-position: bottom right; /* 将背景图片放在容器的右下角 */
}

div.position {
  background-position: 50px 100px; /* 将背景图片放在容器的50像素和100像素的位置 */
}

说明

使用 background-position 属性可以将背景图片放置在容器的不同位置。这在网站设计中非常重要，可以让我们实现各种不同的页面效果。

总之，background-position 属性是在开发网页时非常实用的。会适当使用它可以让我们创建出更好看更美丽的页面。