9. CSS 背景属性

---

1. CSS background 属性

实例

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

body
  { 
  background: #00FF00 url(bgimage.gif) no-repeat fixed top;
  }

说明：

设置对象的背景样式。
如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。
例如：设置 background : white 等于设置 background : white none repeat scroll 0% 0% 。如果在此之前设置了 background-image 属性，则其设置将被 background-image 的默认值 none 覆盖。
背景样式属性的作用区域为对象的内容区域与内补丁( padding )区域。不包括边框( border )与外补丁( margin )区域。尽管该属性不可继承，但如果未指定，其父对象的背景颜色和背景图将在对象下面显示。
对应的脚本特性为 background 。

---

2. background-attachment 属性

实例

如何设置固定的背景图像：

body 
  { 
  background-image: url(bgimage.gif); 
  background-attachment: fixed;
  }

所有浏览器都支持 background-attachment 属性。

注释：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。

说明：
设置或检索背景图像是随对象内容滚动还是固定的。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
请参阅 bgProperties 属性(特性)。对应的脚本特性为 backgroundAttachment 。

示例：

html { background-image: url("anasazi.tif"); background-attachment: fixed; } 
body { background-attachment: scroll; } 

---

3. background-color 属性

实例

body
  {
  background-color:yellow;
  }
h1
  {
  background-color:#00ff00;
  }
p
  {
  background-color:rgb(255,0,255);
  }

定义和用法

background-color 属性设置元素的背景颜色。
元素背景的范围

background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。
transparent 值

尽管在大多数情况下，没有必要使用 transparent。不过如果您不希望某元素拥有背景色，同时又不希望用户对浏览器的颜色设置影响到您的设计，那么设置 transparent 值还是有必要的。

---

4. background-image 属性

实例

body
  { 
  background-image: url(bgimage.gif);
  background-color: #000000;
  }

---

5. background-position 属性

实例

如何定位背景图像：

body
{ 
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

---

6. background-repeat 属性

实例

body
  {
  background-image: url(stars.gif);
  background-repeat: repeat-y;
  }