2024年1月4日发(作者：)

HTML中background的用法

1. 背景颜色

在HTML中，可以使用`background-color`属性来设置元素的背景颜色，例如：

```

欢迎来到我的网站！

```

2. 背景图片

除了设置背景颜色，HTML还可以使用`background-image`属性来设置元素的背景图片，例如：

```

欢迎来到我的网站！

```

3. 背景重复

当背景图片的尺寸小于元素大小时，可以使用`background-repeat`属性来设置背景图片的重复方式。常用的取值有：

-`repeat`：默认值，背景图片在水平和垂直方向上都重复；

-`repeat-x`：只在水平方向上重复；

-`repeat-y`：只在垂直方向上重复；

-`no-repeat`：不重复，背景图片只显示一次。

例如：

```

欢迎来到我的网站！

```

4. 背景定位

通过设置`background-position`属性，可以调整背景图片在元素中的位置。该属性的值可以使用关键词或百分比来表示。常用的关键词有：

-`left`：背景图片左对齐；

-`right`：背景图片右对齐；

-`center`：背景图片居中对齐；

-`top`：背景图片顶部对齐；

-`bottom`：背景图片底部对齐。

例如：

```

欢迎来到我的网站！

```

5. 背景尺寸

使用`background-size`属性可以调整背景图片的尺寸。该属性的值可以是具体的像素值、百分比，或者使用`cover`和`contain`等关键词。常用的取值有：

-`auto`：保持背景图片的原始尺寸；

-`cover`：保持比例的同时填充整个元素，可能会裁剪部分图片；

-`contain`：保持比例的同时完整显示整个图片，可能会有空白部分。

例如：

```

欢迎来到我的网站！

```

6. 背景附着

使用`background-attachment`属性可以设置背景图片是固定还是随着页面滚动。常用的取值有：

-`scroll`：背景图片随着页面滚动；

-`fixed`：背景图片固定在页面上。

例如：

```

欢迎来到我的网站！

```

以上就是HTML中`background`的用法。通过设置`background-color`和`background-image`属性，我们可以为元素设置背景颜色和背景图片。同时，还可以使用其他属性来调整背景图片的重复方式、位置、尺寸以及附着方式，以实现不同的效果。