CSS背景background属性整理

1.background-color

background-color属性：设置元素的背景颜色

2.background-position

background-position属性：设置背景图像的起始位置，需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

常用属性：

• top
• left
• bottom
• right

3.background-size

background-size属性：设置背景图像的尺寸

常用属性：

px：参数1是宽，参数二是高

cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。可能导致部分无法显示

contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

4. background-repeat

background-repeat属性：定义了图像的平铺模式

常用属性：

repeat：默认。背景图像将在垂直方向和水平方向重复。

repeat-x：背景图像将在水平方向重复。

repeat-y：背景图像将在垂直方向重复。

no-repeat：背景图像将仅显示一次。

5. background-origin

background-origin属性：规定 background-position 属性相对于什么位置来定位。

常用属性：

padding-box：背景图像相对于内边距框来定位。

border-box：背景图像相对于边框盒来定位。

content-box：背景图像相对于内容框来定位

6.background-clip

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

常用属性：

border-box：背景被裁剪到边框盒。

padding-box：背景被裁剪到内边距框。

content-box：背景被裁剪到内容框。

7.background-attachment

background-attachment属性：设置背景图像是否固定或者随着页面的其余部分滚动。

常用属性：

scroll：默认值。背景图像会随着页面其余部分的滚动而移动。

fixed：当页面的其余部分滚动时，背景图像不移动。

8.background-image

background-image属性：为元素设置背景图像。

常用属性：

url('URL')   指向图像的路径。

9.background属性：

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

例子：background: #00FF00 url(bgimage.gif) no-repeat fixed top;

属性说明：

• background-color         设置元素的背景颜色
• background-position     设置背景图像的起始位置
• background-size     设置背景图像的尺寸
• background-repeat    定义了图像的平铺模式
• background-origin     规定 background-position 属性相对于什么位置来定位。
• background-clip    规定背景的绘制区域
• background-attachment    设置背景图像是否固定或者随着页面的其余部分滚动。
• background-image    为元素设置背景图像。