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 ]

.ssl{ width:100%; height: 600px; background-image: url("../img/search.jpg"); background-repeat: no-repeat; background-position: center; position: relative; }

这段CSS代码对一个类名为"ssl"的元素进行样式设置。具体来说，它将该元素的宽度设置为100%，高度设置为600px，并将其背景图像（background-image）设置为一个名为"search.jpg"的图像文件，该文件位于该CSS文件所在目录的上一级目录下的img子目录中。该元素的背景不进行重复（background-repeat: no-repeat），并且将其背景图像在元素中央居中显示（background-position: center）。该元素的定位方式（position）设置为相对定位（relative），这意味着该元素的位置相对于其正常位置发生了偏移。