1. 背景色
- 全局背景色
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 class="no2">这个段落设置了内边距。</p>
2. 背景图像
- 全局背景
body {background-image: url(/i/eg_bg_04.gif);} - 部分元素背景
p.flower {background-image: url(/i/eg_bg_03.gif);} - 背景重复
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}
repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。repeat 导致图像在水平垂直方向上都平铺。
- 背景定位
使用background-position
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}
- 关键词定位置：top bottom center left right通过组合定图像位置
- 百分数定位置：
background-position:50% 50%;
图像中心与网页的中心对齐
background-position 的默认值是 0% 0% - 长度值定位置:设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：
- 背景关联
文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失.background-attachment处理这种情况
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。修改为fixed，图像相对于可视区是固定的。
