CSS background-position 属性

background-position 属性用于设置背景图片在元素中的位置。它可以接受一个或两个关键字值、百分比值、长度值或组合值。

语法

background-position: value;

值

• 关键字值：left、center、right、top、bottom，分别表示背景图片在元素的左侧、水平居中、右侧、顶部、底部。
• 百分比值：相对于元素的宽度和高度进行定位，例如 50% 50% 表示在元素的水平和垂直中心。
• 长度值：以像素、厘米等单位进行定位，可以设置水平和垂直位置，例如 10px 20px 表示横向偏移 10 像素，纵向偏移 20 像素。
• 组合值：可以同时设置水平和垂直位置，例如 right bottom 表示背景图片在元素的右下角。

示例

// www.javascriptcn.com code example
.element {
  background-image: url('example.jpg');
  background-position: center; /* 水平垂直居中 */
}

.element {
  background-image: url('example.jpg');
  background-position: 20% 50%; /* 水平偏移 20%，垂直居中 */
}

.element {
  background-image: url('example.jpg');
  background-position: 10px 20px; /* 水平偏移 10px，垂直偏移 20px */
}

.element {
  background-image: url('example.jpg');
  background-position: right bottom; /* 右下角 */
}

通过合理使用 background-position 属性，可以实现精确控制背景图片在元素中的位置，从而实现更加灵活多样的设计效果。