CSS背景用于定义元素的背景效果。

CSS background-color

back-ground color属性指定元素的背景颜色。

下列修改页面的背景颜色：

1
2
3
body {
  background-color: lightblue;
}

CSS background-image

设置背景图像：

1
2
3
body {
  background-image: url("paper.gif");
}

background-repeat

默认情况下，在水平和垂直方向上都重复图像。

可以设置只在某个方向上进行重复：

1
2
3
4
body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

也可以设置不重复：

1
2
3
4
body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
}

background-position

指定背景图片的位置：

1
2
3
4
5
body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

background-attachment

指定图像背景图片滚动还是固定：

1
2
3
4
5
6
body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed; //scroll
}

不透明度/透明度

设置整块不透明度

opacity属性指定元素的不透明度/透明度。取值范围0 - 1，值越低越透明。

整块设置不透明度会影响该元素的子元素。

指定元素不透明度

使用RGBA设置背景颜色，进而设置不透明度。这样不会影响该元素的子元素。

简写背景属性

1
2
3
4
5
6
body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

简写后：

1
2
3
body {
  background: #ffffff url("tree.png") no-repeat right top;
}