background-position 属性用于设置背景图片在元素中的位置。它可以接受一个或两个关键字值、百分比值、长度值或组合值。
语法
background-position: value;
值
- 关键字值：
left、center、right、top、bottom，分别表示背景图片在元素的左侧、水平居中、右侧、顶部、底部。 - 百分比值：相对于元素的宽度和高度进行定位，例如
50% 50%表示在元素的水平和垂直中心。 - 长度值：以像素、厘米等单位进行定位，可以设置水平和垂直位置，例如
10px 20px表示横向偏移 10 像素，纵向偏移 20 像素。 - 组合值：可以同时设置水平和垂直位置，例如
right bottom表示背景图片在元素的右下角。
示例
-- -------------------- ---- ------- -------- - ----------------- ------------------- -------------------- ------- -- ------ -- - -------- - ----------------- ------------------- -------------------- --- ---- -- ---- -------- -- - -------- - ----------------- ------------------- -------------------- ---- ----- -- ---- --------- ---- -- - -------- - ----------------- ------------------- -------------------- ----- ------- -- --- -- -
通过合理使用 background-position 属性，可以实现精确控制背景图片在元素中的位置，从而实现更加灵活多样的设计效果。