CSS 背景

CSS 背景属性用于定义元素的背景样式。

背景属性

CSS 样式为一个元素的背景提供若干属性，如： background-color 、background-image、 background-repeat 、background-attachment 和 background-position 。以下部分将介绍如何使用这些属性逐个设置背景的不同样式。

背景颜色

background-color 属性用于设置元素的背景颜色。

下面的示例演示了如何设置网页的背景颜色。

body {
    background-color: #f0e68c;
}

CSS 中的颜色通常由以下方法指定：

• 一个十六进制值 - 比如 #ff0000
• RGB 值 - 如 rgb(255,0,0)
• 颜色名称 - 如 red

查看 CSS 颜色名称 以获取可能颜色名称的完整列表。

背景图片

background-image 属性将图像设置为 HTML 元素的背景。

请参阅下面的示例，该示例演示如何设置页面的背景图像。

body {
    background-image: url("leaf.jpg");
}

背景重复

默认情况下， background-image 属性会水平和垂直重复图像。

通过使用 background-repeat 属性，你可以控制背景图像在 html 元素的背景中的平铺方式。你可以设置背景图像垂直（y 轴），水平（x 轴），两个方向或两个方向重复。

请参阅下面的示例，该示例演示如何通过水平重复切片图像来设置网页的渐变背景。

body {
    background-image: url("gradient.png");
    background-repeat: repeat-x;
}

背景附属

background-attachment 属性确定背景图像是相对于视区固定还是与包含块一起滚动。

body {
    width: 250px;
    height: 200px;
    overflow: scroll;
    background-image: url("recycle.jpg");
    background-attachment: fixed;
}

背景位置

background-position 属性用于控制背景图像的位置。

如果 background-position 未指定，则将图像放置在元素的默认左上角位置，即 (0,0) 。请参阅以下示例：

body {
    background-image: url("tree.png");
    background-repeat: no-repeat;
}

在以下示例中，背景图像位于右上角，图像的位置由 background-position 属性指定。

body {
    background-image: url("tree.png");
    background-repeat: no-repeat;
    background-position: 100% top;
}

背景速记属性

从上面的示例中可以看出，在处理背景时需要考虑许多属性。也可以在一个属性中指定所有这些属性，以缩短代码。这被称为速记属性。

background 属性是用于设置所有单独的背景属性的缩写属性（即 background-color、background-image、background-repeat、background-attachment 和 background-position）

body {
    background-color: #f0e68c;
    background-image: url("smiley.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 250px 25px;
}

使用简写表示法，上面的例子可以写成：

body {
    background: #f0e68c url("smiley.png") no-repeat fixed 250px 25px;
}

使用 background 速记属性时，属性值的顺序应为。

background: color image repeat attachment position;

如果在使用简写表示法时缺少或未指定单个背景属性的值，则将使用该属性的默认值（如果有）。

注意： 背景属性不会继承，但默认情况下，父元素的背景将是可见的，因为 CSS background 属性的初始 transparent 值（即默认值）。