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;
}