jQuery的css()如何修改背景图片

封面图 • 2025-10-16 • jQuery

在 jQuery 中，你可以使用 `.css()` 方法来修改元素的背景图片。`.css()` 方法可以设置或获取 CSS 属性的值。

### 1. 修改背景图片（`background-image`）

#### 示例代码：

```javascript
$('#myElement').css('background-image', 'url("image.jpg")');
```

这会将 ID 为 `myElement` 的元素的背景图片设置为 `image.jpg`。

---

### 2. 更简洁的方式（推荐）

你也可以使用 `.css()` 的对象语法来设置多个样式属性：

```javascript
$('#myElement').css({
    'background-image': 'url("image.jpg")',
    'background-size': 'cover'
});
```

---

### 3. 获取当前背景图片

如果你想获取当前元素的背景图片，可以这样做：

```javascript
var currentBg = $('#myElement').css('background-image');
console.log(currentBg); // 输出类似 "url(http://example.com/image.jpg)"
```

> 注意：`background-image` 返回的是完整的 `url(...)` 字符串，如果需要提取 URL 部分，可以使用字符串处理方法。

---

### 4. 使用 `background` 简写属性

如果你想要一次性设置背景相关的多个属性，可以使用简写属性：

```javascript
$('#myElement').css('background', 'url("image.jpg") no-repeat center center');
```

这相当于设置了：
- `background-image`: `url("image.jpg")`
- `background-repeat`: `no-repeat`
- `background-position`: `center center`

---

### 总结

| 方法 | 说明 |
|------|------|
| `.css('background-image', 'url(...)')` | 设置背景图片 |
| `.css({ background-image: '...' })` | 设置多个样式 |
| `.css('background-image')` | 获取背景图片 |
| `.css('background', '...')` | 简写设置背景属性 |

如果你有更具体的场景（比如动态路径、响应式图片等），欢迎继续提问！