css背景图片大小自适应

CSS中可以使用background-size属性来控制背景图片的大小自适应。通过设置background-size为cover、contain或者指定特定的宽高值，可以实现图片的自适应效果。

一、background-size属性的取值

background-size属性可以设置以下几种取值：

1. auto：图片保持原始大小。

2. cover：背景图片完全覆盖元素，并保持图片的原始比例。如果容器的宽高比例与图片的宽高比例不一致，图片可能会被裁剪。

3. contain：背景图片完全包含在元素中，并保持图片的原始比例。如果容器的宽高比例与图片的宽高比例不一致，会有部分背景区域为空白。

4. 百分比值：设置背景图片相对于容器的宽度和高度的百分比。例如，设置background-size: * *表示背景图片的宽度和高度都和容器一样。

二、使用background-size实现背景图片大小自适应

1. cover实现背景图片撑满整个容器：

```css

.container {

background-image: url("bg.jpg");

background-size: cover;

background-repeat: no-repeat;

}

```

通过设置background-size为cover，背景图片将会完全覆盖容器，同时保持图片的原始比例。可以使用background-repeat属性来控制是否平铺背景图片。

2. contain实现背景图片完整显示在容器内：

```css

.container {

background-image: url("bg.jpg");

background-size: contain;

background-repeat: no-repeat;

}

```

通过设置background-size为contain，背景图片将会被完整包含在容器中，并保持图片的原始比例。如果容器的宽高比例与图片的宽高比例不一致，会有部分背景区域为空白。

3. 指定特定的宽高值：

```css

.container {

background-image: url("bg.jpg");

background-size: 500px 300px;

background-repeat: no-repeat;

}

```

通过设置background-size为特定的宽高值，可以将背景图片缩放到指定的大小。

四、总结

通过使用CSS的background-size属性，我们可以实现背景图片的大小自适应。可以通过设置cover、contain或者指定具体的宽高值来控制图片的显示效果。根据实际需求选择合适的背景大小自适应方式，可以让网页有更好的视觉效果。