CSS background 属性

background 是一种 CSS 简写属性,用于一次性集中定义各种背景属性,包括:background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size,和 background-attachment。


实例

如何在一个声明中设置所有背景属性:

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. body
  5. {
  6. background: lightblue url("/images/img_tree.gif") no-repeat fixed center;
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <p>这是一些文本。</p>
  12. <p>这是一些文本。</p>
  13. <p>这是一些文本。</p>
  14. <p>这是一些文本。</p>
  15. <p>这是一些文本。</p>
  16. <p>这是一些文本。</p>
  17. </body>
  18. </html>

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

属性
background1.04.01.01.03.5

注释:IE8 以及更早的浏览器不支持一个元素多个背景图像。

注释:IE7 以及更早的浏览器不支持 "inherit"。IE8 需要 !DOCTYPE。IE9 支持 "inherit"。


定义和用法

background 简写属性在一个声明中设置所有的背景属性。

可以设置如下属性:

  • background-color
  • background-position
  • background-size
  • background-repeat
  • background-origin
  • background-clip
  • background-attachment
  • background-image

如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url(‘smiley.gif’); 也是允许的。通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。

默认值:not specified
继承性:no
版本:CSS1 + CSS3
JavaScript 语法:object.style.background="white url(paper.gif) repeat-y"

可能的值

描述CSS
background-color规定要使用的背景颜色。1
background-position规定背景图像的位置。1
background-size规定背景图片的尺寸。3
background-repeat规定如何重复背景图像。1
background-origin规定背景图片的定位区域。3
background-clip规定背景的绘制区域。3
background-attachment规定背景图像是否固定或者随着页面的其余部分滚动。1
background-image规定要使用的背景图像。1
inherit规定应该从父元素继承 background 属性的设置。1

相关页面

CSS 教程:CSS 背景

CSS3 教程:CSS3 背景

HTML 教程:background 属性

分类导航