如何用css实现背景图片自适应?

CSS的background-size属性可以实现背景图片的自适应。这个属性指定背景图像的尺寸，可以通过指定百分比、像素值、关键字或者同时指定宽度和高度来实现自适应。

1. 百分比值：可以使用百分比值来设置背景图像的相对尺寸。例如，将background-size设置为*** ***可以使背景图像充满整个容器。

```css

.background {

background-image: url('image.jpg');

background-size: *** ***;

}

```

2. 像素值：可以使用像素值来设置背景图像的固定尺寸。例如，将background-size设置为800px 600px可以将背景图像设置为固定大小，不论容器的大小如何。

```css

.background {

background-image: url('image.jpg');

background-size: 800px 600px;

}

```

3. 关键字：可以使用关键字来指定背景图像的尺寸。常用的关键字包括cover和contain。

- cover关键字会将背景图像调整为尽可能大，同时完全覆盖容器。这样会导致图像可能被拉伸或被裁剪。

```css

.background {

background-image: url('image.jpg');

background-size: cover;

}

```

- contain关键字会将背景图像调整为尽可能小，同时完全包含在容器中。这样会导致图像可能显示出空白区域。

```css

.background {

background-image: url('image.jpg');

background-size: contain;

}

```

4. 同时指定宽度和高度：通过同时指定背景图像的宽度和高度可以实现更精确的尺寸控制。

```css

.background {

background-image: url('image.jpg');

background-size: 50% 50%;

}

```

以上是使用CSS的background-size属性来实现背景图片自适应的方法。通过选择合适的单位、关键字和尺寸值，可以实现背景图片在不同尺寸的容器中适应性地显示，从而提升网页的用户体验。