CSS中的背景属性background

2019-03-26299次阅读css

CSS中的background属性允许您控制任何元素的背景。它也有一个速记属性,这意味着它允许您在一行中编写多个背景属性值。像这样:

body {
  background:
     url(sweettexture.jpg)    /* image */
     top center / 200px 200px /* position / size */
     no-repeat                /* repeat */
     fixed                    /* attachment */
     padding-box              /* origin */
     content-box              /* clip */
     red;                     /* color */
}

背景由八个其他属性组成:

您几乎可以按任何顺序使用您喜欢的这些属性的任意组合(尽管规范中推荐的顺序如上所述)。但是有一个问题:在background属性中未指定的任何内容都会自动设置为默认值。所以如果你做这样的事情:

body {
  background-color: red;
  background: url(sweettexture.jpg);
}

但结果背景是透明的,而不是红色。修复很简单:只需把background-color定义放在background之后即可,或只使用速记(例如background: url(...) red;)

多个背景

CSS3增加了对多个背景的支持,这些背景层堆叠在彼此的顶部。与背景相关的任何属性都可以使用逗号分隔开,如下所示:

body {
  background: url(sweettexture.jpg), url(texture2.jpg) black;
  background-repeat: repeat-x, no-repeat;
}


逗号分隔列表中的每个值对应一个图层:第一个值是顶层,第二个值是第二个图层,背景颜色始终是最后一个图层

上一篇: CSS利用filter/opacity实现浏览器兼容的背景透明  下一篇: table表格在移动端下撑出css修复  

CSS中的背景属性background相关文章