在本教程中，我们将学习CSS背景属性。

背景颜色

我们使用background-color属性来设置元素的背景色。
此属性的值可以是颜色的名称，十六进制形式的颜色，rgb和rgba值的颜色。

在下面的示例中，我们将div的背景色设置为浅黄色。

div {
	background-color : lightyellow;
}

这是一个示例段落。

背景图

我们使用background-image属性来设置元素的背景图像。
默认情况下，将重复图像以填满整个容器。

背景图像的重复也称为平铺。

在下面的示例中，我们将设置div的背景图像。

div {
	background-image : url(/image/theitroad-logo-black-311x48.png);
}

背景重复

我们可以使用background-repeat属性来控制背景图像的重复(平铺)。

下面列出了此属性的不同值。

• repeat-默认值，使图像水平和垂直重复。

• 如果只希望水平重复，则重复-x。

• 如果只想垂直重复，请重复-y。

• 如果我们不想重复，请不要重复。

In the following example we are using repeat.

div {
	background-image : url(/image/theitroad-logo-black-311x48.png);
	background-repeat : repeat;
}

In the following example we are using repeat-x.

div {
	background-image : url(/image/theitroad-logo-black-311x48.png);
	background-repeat : repeat-x;
}

In the following example we are using repeat-y.

div {
	background-image : url(/image/theitroad-logo-black-311x48.png);
	background-repeat : repeat-y;
}

In the following example we are using no-repeat.

div {
	background-image : url(/image/theitroad-logo-black-311x48.png);
	background-repeat : no-repeat;
}

背景位置

为了控制背景图像的位置，我们使用" background-position"属性。

该属性可以采用如下列表的值。

• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right

我们也可以使用x％y％或者xpos ypos来指定确切位置。

In the following example we are using center center.

div {
	background-image : url(/image/theitroad-logo-black-311x48.png);
	background-repeat : no-repeat;
	background-position : center center;
}

In the following example we are using 10% 20%.

div {
	background-image : url(/image/theitroad-logo-black-311x48.png);
	background-repeat : no-repeat;
	background-position : 10% 20%;
}

In the following example we are using 10px 50px.

div {
	background-image : url(/image/theitroad-logo-black-311x48.png);
	background-repeat : no-repeat;
	background-position : 10px 50px;
}

背景附加

我们使用background-attachment属性来使背景图像固定或者可滚动。

它有两个值-滚动(默认值)和固定值。

如果将该值设置为固定，则图像将不会与页面的其余内容一起滚动。

背景的简写

我们可以通过以下方式组合上述背景属性。

• background-color
• background-image
• background-attachment
• background-position
• background-repeat

div {
	background: lightyellow url(/image/theitroad-logo-black-311x48.png) scroll center center no-repeat;
}

因此，在上述规则中，我们设置了：

• background-color = lightyellow
• background-image = url(/image/theitroad-logo-black-311x48.png)
• background-attachment = scroll
• background-position = center center
• background-repeat = no-repeat