CSS的background属性是页面设计中最基本且常用的属性之一。它可以设置页面中的背景颜色、背景图片、呈现方式等等，可以说是页面设计中最重要的属性之一。本文将为大家介绍CSS的background属性及其用法，希望对大家在页面设计中有所帮助。

一、CSS的background属性

CSS的background属性是设置背景样式的最基本属性，它涵盖了以下子属性：

1. background-color：设置背景颜色；

2. background-image：设置背景图片；

3. background-repeat：设置背景图片是否重复；

4. background-position：设置背景图片的起点位置；

5. background-size：设置背景图片的大小；

6. background-clip：设置背景样式的区域；

7. background-origin：设置背景样式的起点；

8. background-attachment：设置背景图片是否随滚动条滚动。

其中，background-color和background-image是最基本、最常用的两个子属性。下面将对这两个子属性进行详细介绍。

二、background-color

background-color属性用于设置背景颜色。它有两种设置方式：一种是使用预设的颜色值，例如：background-color: red;；另一种是使用RGB值或十六进制值，例如：background-color: #FF0000。

除了设置纯色背景，background-color属性还可以设置透明度。通常情况下，透明度的值为0 ~ 1之间（0表示完全透明，1表示完全不透明）。可以通过设置rgba值的方式来实现。例如：

background-color: rgba(255, 0, 0, 0.5); /* 透明度为0.5 */

三、background-image

background-image属性用于设置背景图片。它的值可以为图片的URL地址，也可以为预测的颜色值。

如果设置的值为图片的URL地址，则需要使用url()方式来包含图片的地址。例如：

background-image: url("图片地址");

如果设置的值为预设的颜色值，例如：

background-image: none; /* 不设置背景图片，只设置背景颜色 */

background-image: inherit; /* 继承父元素的背景图像 */

background-image: initial; /* 恢复到默认值 */

同时，background-image属性还可以设置多个背景图片，通过逗号分隔即可。例如：

background-image: url("img1.jpg"), url("img2.jpg");

在设置多个背景图片时，第一个图片最先绘制，第二个图片紧随其后，以此类推。每个背景图片的大小、位置等属性也可以单独设置。

四、background-repeat

background-repeat属性用于设置背景图片是否重复铺满整个容器。它有四个值可以选择：

1. repeat：默认值，表示背景图片在水平和垂直方向分别平铺；

2. repeat-x：表示背景图片在水平方向上平铺；

3. repeat-y：表示背景图片在垂直方向上平铺；

4. no-repeat：表示背景图片不进行平铺。

例如：

background-repeat: repeat;

background-repeat: no-repeat;

设置重复或不重复图片的背景时，需要注意图片大小和容器大小的兼容性。

五、background-position

background-position属性用于设置背景图片的起点位置。可以使用关键字进行设置（例如：top、bottom、left、right、center），也可以使用具体数值进行设置。

使用关键字的方式，例如：

background-position: top left; /* 背景图片从顶部左边开始 */

background-position: bottom right; /* 背景图片从底部右边开始 */

使用具体数值的方式，例如：

background-position: 20px 10px; /* 背景图片从左边20像素，顶部10像素开始 */

上述的数值可以是负数，例如：

background-position: -10px -20px;

六、background-size

background-size属性用于设置背景图片的大小。它可以设置为具体数值，也可以使用cover和contain等关键字进行设置。

使用具体数值进行设置，例如：

background-size: 100px 200px; /* 宽度为100像素，高度为200像素 */

同时，background-size还可以设置百分比的值，例如：

background-size: 50% 100%; /* 宽度为元素宽度的50%，高度为元素宽度的100% */

使用关键字cover和contain等，则可以根据图片或容器的大小来自适应背景图片的大小。例如：

background-size: cover;

background-size: contain;

使用cover则会让背景图片铺满容器，但是如果图片比容器小，则图片会被放大至与容器等大；如果图片比容器大，则图片会被缩小至铺满容器且不裁剪。

使用contain则会让背景图片适应容器大小，但是如果图片比容器小，则图片铺满容器；如果图片比容器大，则图片被缩小至适应容器大小。

七、background-clip

background-clip属性用于设置背景样式的显示范围。它有四个取值：

1. border-box：默认值，背景样式绘制到边框之内；

2. padding-box：背景样式绘制到内边距之内；

3. content-box：背景样式绘制到内容区域之内；

4. text：背景样式绘制到文本之上。

例如：

background-clip: border-box;

background-clip: padding-box;

background-clip: content-box;

background-clip: text;

八、background-origin

background-origin属性用于设置背景样式的起点。它有三个取值：

1. padding-box：默认值，背景样式以内边距为起点绘制；

2. border-box：背景样式以边框为起点绘制；

3. content-box：背景样式以内容为起点绘制。

例如：

background-origin: padding-box;

background-origin: border-box;

background-origin: content-box;

九、background-attachment

background-attachment属性用于设置背景图片是否随滚动条滚动。它有两个取值：

1. scroll：默认值，背景图片是固定不动的，当容器滚动时，背景图片不随之滚动；

2. fixed：背景图片是随容器一起滚动的，当容器滚动时，背景图片也会随之滚动。

例如：

background-attachment: scroll;

background-attachment: fixed;

十、总结

本文为大家总结了CSS的background属性及其用法，包括background-color、background-image、background-repeat、background-position、background-size、background-clip、background-origin和background-attachment等子属性，希望对大家在页面设计中有所帮助。在使用该属性时，需要注意兼容性和各个属性之间的组合搭配，才能更好的实现背景样式的效果。