css如何设置背景图片大小
时间: 2024-09-20 19:09:33 浏览: 69
在CSS中,你可以使用`background-size`属性来设置背景图像的大小。有两种常用的方式:
1. **覆盖(cover)**[^1]:
```css
.container {
background-image: url('background.jpg');
background-size: cover;
width: 500px; /* 这里的width和height可以根据需要调整 */
height: 300px;
}
```
当设置为`cover`时,背景图像会填充其容器,保持宽高比,使图像完全覆盖容器。
2. **指定尺寸**:
```css
.container {
background-image: url('background.jpg');
background-size: 200px 100px; /* 指定具体宽度和高度 */
width: 200px;
height: 100px;
}
```
这里直接给出了具体的宽度和高度值,背景图将以这些尺寸显示。
3. **百分比或自适应**:
```css
.container {
background-image: url('background.jpg');
background-size: 50%; /* 设置为50%会让图像占据容器的一半 */
}
```
你可以根据需要选择适合的方法来设置背景图片的大小。
阅读全文
相关推荐

















