以下是一些常见的用法:
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