css 背景属性详细总结
1，背景颜色background-color
background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。
p {
background-color: gray; 和普通颜色设置是一样的
}
2.背景的图片background-img
background-image: url(图片的路径);
background-image: none; 默认值是 none
另外还要补充一点，background-image 也不能继承。事实上，所有背景属性都不能继承。
3，背景重复 backgroun-repeat
|
1
2
3
4
5
6
7
8
9
10
|
background-repeat: repeat; 重复平铺满
background-repeat:repeat-x; 向x轴重复
background-repeat:repeat-y; 向Y轴重复
background-repeat:no-repeat; 不重复
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}
|
4，背景位置background-position
为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。
根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。
如果只出现一个关键字，则认为另一个关键字是 center。
也可以使用数值位置来表示（background-position:50px 100px;）
| 单一关键字 | 等价的关键字 |
|---|---|
| center | center center |
| top | top center 或 center top |
| bottom | bottom center 或 center bottom |
| right | right center 或 center right |
| left | left center 或 center left |
p
{
background-image:url('bgimg.gif');
background-repeat:no-repeat;
background-position:top;
}
等价于
p
{
background-image:url('bgimg.gif');
background-repeat:no-repeat;
background-position:top center;
background-position:center top;
}
5,背景关联 background-attachment
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：也就是说，文档滚动背景图一直存在。
|
1
2
3
4
5
6
|
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
|
如需查看上例的效果，可以亲自试一试。
background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。也就是说超过的文档不会显示图片背景效果.