1,背景颜色background-color
创新互联提供高防服务器、云服务器、香港服务器、成都西云数据中心等background-color 不能继承,其默认值是 transparent。transparent 有“透明”之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。
p {
background-color: gray; 和普通颜色设置是一样的
}
2.背景的图片background-img
background-p_w_picpath: url(图片的路径);
background-p_w_picpath: none; 默认值是 none
另外还要补充一点,background-p_w_picpath 也不能继承。事实上,所有背景属性都不能继承。
3,背景重复 backgroun-repeat
background-repeat: repeat; 重复平铺满 background-repeat:repeat-x; 向x轴重复 background-repeat:repeat-y; 向Y轴重复 background-repeat:no-repeat; 不重复 body { background-p_w_picpath: 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-p_w_picpath:url('bgimg.gif');
background-repeat:no-repeat;
background-position:top;
}
等价于
p
{
background-p_w_picpath:url('bgimg.gif');
background-repeat:no-repeat;
background-position:top center;
background-position:center top;
}
5,背景关联 background-p_w_upload
如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。
您可以通过 background-p_w_upload 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:也就是说,文档滚动背景图一直存在。
body { background-p_w_picpath:url(/i/eg_bg_02.gif); background-repeat:no-repeat; background-p_w_upload:fixed }
如需查看上例的效果,可以亲自试一试。
background-p_w_upload 属性的默认值是 scroll,也就是说,在默认的情况下,背景会随文档滚动。也就是说超过的文档不会显示图片背景效果.
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
本文名称:css背景属性详细总结-创新互联
当前链接:http://scyingshan.cn/article/dpespp.html