css背景属性background – 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属性用于控制背景图像的位置。

如果没有指定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;
}

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

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

当使用后台速记属性时，属性值的顺序应该是。

background: color image repeat attachment position;

如果在使用简写表示法时某个背景属性的值丢失或未指定，则将使用该属性的默认值(如果有的话)。

注意：背景属性不是继承的，但是父元素的背景在默认情况下是可见的，因为background CSS属性的初始值(即默认值)是透明的。