background-image偏移

`background-image` 属性用于设置元素的背景图像，而要偏移这个背景图像，你可以使用 `background-position` 属性。`background-position` 允许你指定图像在背景中的起始位置，可以接受几种不同的值类型：

1. **百分比**：相对于元素的宽度和高度，比如 `left: 50%`, `top: 20%`，会将背景图片向左移动元素宽度的一半，向上移动20%的高度。

2. **长度值**：可以是像素值 (`px`)、em、rem 或者其他长度单位。例如 `center` 表示居中对齐，`left top` 则表示左上角对齐。

3. **短横线分隔的两个值**：分别对应水平和垂直方向的位置，如 `10px 20px`，会水平偏移10像素，垂直偏移20像素。

4. **关键词**：一些预设的关键词，如 `right bottom`，`center center` 等。

要使用这些属性，只需在 CSS 中编写类似这样的样式：

selector {
  background-image: url('image-url.jpg');
  background-position: <horizontal-position> <vertical-position>;
}

相关问题

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 ]

background-image 位置

### CSS `background-image` 位置设置

在 CSS 中，通过 `background-position` 属性可以精确控制背景图像的位置。此属性接受两个值来定义水平和垂直方向上的偏移量。

对于给定的样式：

div {
    width: 400px;
    height: 200px;
    padding: 35px;
    border: 5px dotted #000;
    background-repeat: no-repeat;
    background-origin: content-box;
    background-size: 100px;
    background-image: url(./1111.jpg);
}

为了调整背景图片的位置，在上述代码基础上增加 `background-position` 属性即可[^2]。例如，使背景图位于容器左上角内边距区域内的指定位置：

div {
    /* ...其他原有样式 */
    background-position: 20% 30%; /* 水平方向20%，垂直方向30% */
}

如果希望更直观地理解这些百分比数值的意义，则可以通过具体像素单位来进行设定：

div {
    /* ...其他原有样式 */
    background-position: 50px 75px; /* 左侧向右移动50px,顶部向下移动75px */
}

除了使用长度或百分比外，还可以采用关键字如 top、center 或 bottom 来简化某些常见场景下的配置工作：

div {
    /* ...其他原有样式 */
    background-position: center top; /* 图片居中并贴紧顶部边界 */
}