CSS 背景

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

背景属性

CSS 样式为一个元素的背景提供若干属性,如: background-colorbackground-imagebackground-repeatbackground-attachmentbackground-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-colorbackground-imagebackground-repeatbackground-attachmentbackground-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 值(即默认值)。