background-position 属性用于设置背景图像的起始位置。该属性可以接受多种值,表示图像在容器框内的具体位置。

以下是一些常见的用法:

1. 使用关键词:
    background-position: top left;

    其中的 top 和 left 表示背景图像相对于容器框的左上角定位。你可以使用 bottom、right 或者 center 等关键词。

2. 使用百分比值:
    background-position: 50% 50%;

    这表示背景图像的中心与容器框的中心对齐。你可以使用不同的百分比值。

3. 使用像素值:
    background-position: 10px 20px;

    这表示背景图像的左上角与容器框的左上角相距10像素和20像素。

4. 使用混合值:
    background-position: top 10px left 20px;

    这种写法将水平和垂直方向的位置分别指定。

5. 使用关键词和百分比值混合:
    background-position: top 10px right 20%;

    这表示背景图像位于容器框的右上角,水平方向相对于容器框的右侧边界的20%,垂直方向相对于容器框的上边界偏移10像素。

这些值可以灵活组合,以适应各种情况。例如:
.element {
  background-image: url('background.jpg');
  background-position: center top;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
}

在这个例子中,background-position: center top; 表示背景图像的中心水平对齐于容器框的中心,而垂直方向位于容器框的顶部。


转载请注明出处:http://www.zyzy.cn/article/detail/5997/CSS