css背景属性详细总结-创新互联

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背景属性详细总结-创新互联
链接分享：https://www.cdcxhl.com/article38/dpespp.html

成都网站建设公司_创新互联，为您提供软件开发、外贸网站建设、网页设计公司、动态网站、商城网站、网站设计公司

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联