温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

css 背景属性详细总结

发布时间:2020-07-30 13:21:05 来源:网络 阅读:344 作者:crazy_charles 栏目:开发技术


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;)


单一关键字等价的关键字
centercenter center
toptop center 或 center top
bottombottom center 或 center bottom
rightright center 或 center right
leftleft 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,也就是说,在默认的情况下,背景会随文档滚动。也就是说超过的文档不会显示图片背景效果.


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI