📜  HTML | DOM 样式 backgroundPosition 属性(1)

📅  最后修改于: 2023-12-03 15:31:13.430000             🧑  作者: Mango

HTML | DOM 样式 backgroundPosition 属性

backgroundPosition 属性用于设置背景图像在元素内的位置。

语法
background-position: x-axis y-axis;
  • x-axis:必需。用于设置水平方向上的背景位置。
  • y-axis:可选。用于设置垂直方向上的背景位置。
取值

background-position 属性有以下取值:

  • 百分比
  • 长度值
  • 关键字(left、center、right、top、bottom)

取值方法:

background-position: 50% 50%; /* 水平方向上居中,垂直方向上居中 */
background-position: left top; /* 水平方向上左对齐,垂直方向上顶部对齐 */
background-position: 0 0; /* 等同于 left top */
实例
#example {
  background-image: url('example.jpg');
  background-position: 50% 50%;
}

上述代码将元素 #example 的背景图像设置为 example.jpg,并将其在水平和垂直方向上居中在元素中。

浏览器兼容性

| Chrome | IE | Firefox | Safari | Opera | | ------ | ------ | ------ | ------ | ------ | | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |

总结

backgroundPosition 属性用于设置背景图像在元素内的位置,可以通过百分比、长度值或关键字来指定。此属性在所有现代浏览器中均支持。