CSS3新增背景属性

一、background 复合属性

background 简写属性在一个声明中设置所有的背景属性，可以设置如下属性：

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

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

二、background-color 属性设置元素的背景颜色。

2.1. 元素背景的范围

background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）

2.2. transparent 值

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

2.3. 属性值

2.4. 不透明度 / 透明度

opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明

div {
  background-color: green;
  opacity: 0.3;
}

注意： 使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。

2.5. 使用 RGBA 的透明度

如果您不希望对子元素应用不透明度，例如上面的例子，请使用 RGBA 颜色值。下面的例子设置背景色而不是文本的不透明度：

2.6. 说明

三、background-image 属性为元素设置背景图像

元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距
默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

3.1. 语法

background-image: url|none|initial|inherit;

3.2. 属性值

3.3. 说明

四、background-position 属性

background-position 属性设置背景图像的起始位置。
这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。

提示： 您需要把 background-attachment 属性设置为 “fixed”，才能保证该属性在 Firefox 和 Opera 中正常工作。

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

4.1. 属性值

4.2. 技术细节

五、background-size 属性

background-size 属性规定背景图像的尺寸。

5.1. 语法

background-size: length|percentage|cover|contain;

5.2. 属性值

5.3. 技术细节

六、 background-repeat 属性

background-repeat 属性设置是否及如何重复背景图像。
默认地，背景图像在水平和垂直方向上重复。

6.1. CSS 语法

background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;

6.2. 技术细节

七、background-origin 属性

background-origin 属性规定 background-position 属性相对于什么位置来定位。
注释： 如果背景图像的 background-attachment 属性为 “fixed”，则该属性没有效果。

7.1. 属性值

默认值 padding-box

八、background-clip 属性

background-clip 属性规定背景的绘制区域。

8.1. 属性值

默认值 border-box

九、background-attachment 属性

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
background-attachment: scroll|fixed|local|initial|inherit;