css背景属性background – CSS教程 css背景属性|CSS

上一章CSS教程请查看：css颜色属性color
CSS背景属性用于定义元素的背景样式。
背景属性CSS为设计元素的背景提供了几个属性，比如：background-color, background-image, background-repeat, background-attachment and background-position，下一节将介绍如何使用这些属性逐个设置背景的不同样式。
背景颜色background-color属性用于设置元素的背景颜色。
下面的示例演示了如何设置web页面的背景颜色。

body { background-color: #f0e68c; }

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

类似“#ff0000”的十六进制值
类似于“RGB(255,0,0)”的RGB值
类似于“red”的颜色名

查看CSS颜色名称，以获得可能的颜色名称的完整列表。
背景图像background-image属性将图像设置为HTML元素的背景。
下面的示例演示了如何设置页面的背景图像。

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

背景重复默认情况下，background-image属性水平和垂直地重复图像。
通过使用background-repeat属性，你可以控制如何将背景图像平铺到html元素的背景中。你可以设置背景图像重复垂直(y轴)，水平(x轴)，在两个方向，或在任何方向。
下面的示例演示了如何通过水平地重复切片图像来设置web页面的渐变背景。

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-color, background-image, background-repeat, background-attachment and background-position)同时进行。例如：

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

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