一、背景颜色
1,页面背景色
body {
background-color: #5b8a00;
}
2,使用背景色给页面分块
body {
background-color: #ffebe5;
}
.topbanner {
background-color: #fbc9ba;
}
.leftbanner {
background-color: #6d1700;
}
二、背景图片
1,页面背景图
body {
background-image: url(test.jpg);
}
2,背景图的重复
body {
background-image: url(test.jpg);
background-repeat: repeat-y;
}
3,背景图的位置
body {
background-image: url(test.jpg);
background-repeat: no-repeat;
background-position: bottom right;
}
body {
background-image: url(test.jpg);
background-repeat: no-repeat;
background-position: 30% 70%
}
body {
background-image: url(test.jpg);
background-repeat: no-repeat;
background-position: 300px 25px;
}
4,固定背景图片
body {
background-image: url(test.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
5,添加多个背景图片
body {
background-image: url(test1.jpg);
}
div {
background-iamge: url(test2.jpg);
}
6,背景样式综合设置
body {
background: blue url(test.jpg) no-repeat fixed 5px 10px;
}
类似于border、font等属性,可以将多个设置集成到一个语句中以节省代码,加快网络下载速度