精通CSS+DIV:5,用CSS设置网页背景

一、背景颜色
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等属性,可以将多个设置集成到一个语句中以节省代码,加快网络下载速度

你可能感兴趣的:(html,css)