CSS 参考手册 目录

CSS background-position 属性

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

语法

-------------------- ------

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

示例

-------- -
  ----------------- -------------------
  -------------------- ------- -- ------ --
-

-------- -
  ----------------- -------------------
  -------------------- --- ---- -- ---- -------- --
-

-------- -
  ----------------- -------------------
  -------------------- ---- ----- -- ---- --------- ---- --
-

-------- -
  ----------------- -------------------
  -------------------- ----- ------- -- --- --
-

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


上一篇:CSS 属性 background-origin
下一篇:CSS 属性 background-repeat