W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

CSS 背景(Backgrounds)


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

CSS 背景效果属性:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

背景颜色

background-color 属性定义了元素的背景颜色。

页面的背景颜色是这样设置的:

Example

body {
    background-color: lightblue;
}
尝试一下 »

CSS中,颜色值通常以以下方式定义:

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

查阅 CSS Color Values 可以了解颜色值的完整列表。

以下实例中, <h1>, <p>, 和 <div> 元素拥有不同的颜色背景:

Example

h1 {
    background-color: green;
}

div {
    background-color: lightblue;
}

p {
    background-color: yellow;
}
尝试一下 »

背景图像

background-image 属性描述了元素的背景图像。

默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体.

页面背景图片设置实例:

Example

body {
    background-image: url("paper.gif");
}
尝试一下 »

下面是一个例子是一个糟糕的文字和背景图像组合。文本可读性差:

Example

body {
    background-image: url("bgdesert.jpg");
}
尝试一下 »
Note 注意: 使用背景图像时,使用不影响文本的图像。

背景图像 - 水平或垂直平铺

默认情况下,background-image 属性会在页面的水平或者垂直方向平铺。

一些图像如果在水平方向与垂直方向平铺,这样看起来很不协调,如下所示:

Example

body {
    background-image: url("gradient_bg.png");
}
尝试一下 »

如果图像只在水平方向平铺 (background-repeat: repeat-x;), 页面背景会更好些:

Example

body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}
尝试一下 »
Note 注意: 设置图片垂直方向平铺请使用 background-repeat: repeat-y;

背景图像 - 设置定位与不平铺

如果你不想让图像平铺,你可以使用 background-repeat 属性:

Example

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}
尝试一下 »

以上实例中,背景图像与文本显示在同一个位置,为了让页面排版更加合理,不影响文本的阅读,我们可以改变图像的位置。

可以利用 background-position 属性改变图像在背景中的位置:

Example

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}
尝试一下 »

背景图像 - 固定位置

要指定背景图像是固定的(不会滚动页面的其余部分),使用 background-attachment 属性:

Example

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}
尝试一下 »

背景- 简写属性

在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。为了简化这些属性的代码,我们可以将这些属性合并在同一个属性中.

背景颜色的简写属性为 background

Example

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}
尝试一下 »

当使用简写属性时,属性值的顺序为:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

以上属性无需全部使用,你可以按照页面的实际需要使用.


CSS 背景属性

属性 描述
background 简写属性,作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。