css background-position样式

时间:2023-04-04 13:50:16

"background-position" 样式用于设置元素背景图片的位置。可以使用关键字、像素值、百分比值等来指定背景图片的位置。

css语法如下:

background-position: value;

其中,“value”表示背景图片的位置值,可以使用以下格式:

一个关键字,如 "center"、"top"、"bottom"、"left"、"right";
一个像素值,如 "10px 20px" 表示距离上边界 10 像素,距离左边界 20 像素的位置;
一个百分比值,如 "50% 0" 表示距离上边界一半位置,距离左边界 0 像素的位置;
两个值组成的组合,如 "left top"、"right bottom"。
如果只指定一个值,另一个值将默认为 "center"。例如,以下样式将背景图片的位置设置为水平方向居中、垂直方向距离上边界 50% 的位置:

div {
background-position: center 50%;
}

需要注意的是,如果指定的背景图片的尺寸比元素的尺寸小,那么背景图片会在元素的背景区域内重复平铺。可以使用 "background-repeat" 样式来设置背景图片的平铺方式。

相关词 背景