2007-09-30

精通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等属性，可以将多个设置集成到一个语句中以节省代码，加快网络下载速度
评论
goagrass 2008-08-21
CSS背景图片的设置
http://www.cssplay.org.cn/css-tutorial/20080807/632.html

CSS背景图片的运用
http://www.cssplay.org.cn/css-example/20080807/631.html

网页中CSS背景图片实现方法
http://www.cssplay.org.cn/css-tutorial/20080807/630.html
发表评论

您还没有登录，请登录后发表评论

hideto
搜索本博客
我的相册
A6bdc31c-c66e-468e-961e-9cc721e82adc-thumb
screenshot
共 1 张
存档
最新评论