CSS Background(背景)

CSS背景属性用于定义元素的背景样式。CSS 背景这里指通过CSS对对象设置背景属性，如通过CSS设置背景各种样式。

背景属性

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

背景颜色

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

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

css 复制代码

body {background-color: #f0e68c;}

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

十六进制值-例如"#ff0000"
RGB值-例如" rgb（255,0,0）"
颜色名称-如"红色"

背景图像

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

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

css 复制代码

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

背景重复

默认情况下，该background-image属性在水平和垂直方向上都重复图像。

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

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

css 复制代码

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

背景附件

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

css 复制代码

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

背景位置

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

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

css 复制代码

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

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

css 复制代码

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

背景属性速记

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

的background属性是用于设置所有单独的背景属性（即，缩写属性background-color，background-image，background-repeat，background-attachment和background-position）在一次。例如：

css 复制代码

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

使用速记符号，上面的示例可以写成：

css 复制代码

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

使用background简写属性时，属性值的顺序应为。

背景：彩色图像重复附属位置 ;

如果使用速记符号时缺少或未指定单个背景属性的值，则将使用该属性的默认值（如果有）。

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

引用

菜鸟教程