background-image位置

background-image属性用于设置元素的背景图像的位置。但是，background-image属性本身并不能直接设置图像的位置，而是通过background-position属性来控制图像的位置。

background-position属性有多种取值方式，可以通过关键字、像素值或百分比来设置图像的位置。具体的取值方式如下：

1. 使用关键字：可以使用关键字来设置图像的位置，包括top、right、bottom、left和center等。例如，background-position: right top;表示将图像设置在元素的右上方。

2. 使用像素值：可以使用像素值来设置图像的位置，例如background-position: 20px 30px;表示将图像在水平方向上向右偏移20像素，在垂直方向上向下偏移30像素。

3. 使用百分比：可以使用百分比来设置图像的位置，例如background-position: 50% 50%;表示将图像水平和垂直方向上都居中显示，其中百分比是相对于元素的宽度和高度来计算的。

需要注意的是，background-position属性的值的顺序是水平位置在前，垂直位置在后。如果只设置一个值，则默认将其作为水平位置来处理，垂直位置默认为center。

因此，通过设置background-position属性的不同取值方式，可以灵活地控制背景图像在元素中的位置。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [background-image大小和位置的设置](https://blog.csdn.net/weixin_30849591/article/details/96370758)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [通过js获取div的background-image属性](https://download.csdn.net/download/weixin_38507923/13056237)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]