标签：
CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。
纯色背景 背景图像
body{
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
}
1，纯色背景：background-color
body { background-color:yellow; } h1 { background-color:#00ff00; } p { background-color:rgb(255,0,255); }
background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色
<html> <head> <style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} p.no2 {background-color: gray; padding: 20px;} p.no2 {background-color: gray; padding: 20px;margin:20px;border: 4px red dotted;} </style> </head> <body> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <p>这是段落</p> <p class="no2">这个段落设置了内边距。</p> <p class="no3">background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色</p>
</body> </html>
| 值 | 描述 |
|---|---|
| color_name | 规定颜色值为颜色名称的背景颜色（比如 red）。 |
| hex_number | 规定颜色值为十六进制值的背景颜色（比如 #ff0000）。 |
| rgb_number | 规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0)）。 |
| transparent | 默认。背景颜色为透明。 |
| inherit | 规定应该从父元素继承 background-color 属性的设置。 |
2背景图像
body {background-image:url(/i/eg_bg_04.gif);}
a: background-repeat 平铺
background-repeat ：repeat；
HTML DOM
Document.body.style.backgroundRepeat="repeat-y";
| body{ background-image: url(/i/eg_bg_03.gif); background-repeat: no-repeat } |
body { background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-x } |
body { background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y } |
|
|
 |
 |
b:背景定位：background-position
p{
background-image:url(‘bgimg.gif‘);
background-repeat:no-repeat;
background-position:top;// 关键字
}
下面是等价的位置关键字：
| 单一关键字 | 等价的关键字 |
|---|---|
| center | center center |
| top | top center 或 center top |
| bottom | bottom center 或 center bottom |
| right | right center 或 center right |
| left | left center 或 center left |
body { background-image:url(‘/i/eg_bg_03.gif‘);
background-repeat:no-repeat;
background-position:50% 50%;//百分数值
}
body
{
background-image:url(‘/i/eg_bg_03.gif‘);
background-repeat:no-repeat;
background-position:50px 100px;//长度值
}
c:背景关联 background-attachment: fixed;
| 值 | 描述 |
|---|---|
| scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
| fixed | 当页面的其余部分滚动时，背景图像不会移动。 |
| inherit | 规定应该从父元素继承 background-attachment 属性的设置。 |
HTMLDOM ：document.body.style.backgroundAttachment="fixed";标签：
原文地址：http://www.cnblogs.com/blueblueHand/p/backgroundDemo.html
