CSS2背景属性

background:

用于设置background-color，background-image，background-repeat，background-attachemnt，background-position属性

 

 

background-color：背景颜色

 

 

属性：

取值：red | #ff0000 | rgb(255,0,0) | transparent

 

解释：颜色名 | #ff0000 | rgb(255,0,0) | 透明（默认）

 

 

background-image：背景图片

 

属性：

取值：url(/images/foo.gif)|0px 0px |

 

解释：图片地址|上和左边距，要想写右和下，right和bpttom

background-repeat：背景平铺

 

属性：

取值：repeat | repeat-x | repeat-y | no-repeat

 

解释：水平方向垂直方向重复（默认） | 水平方向重复 | 垂直方向重复 | 不重复只显示一次

background-attachemnt：背景图像是否和对象一起滚动

 

属性：

取值：fixed | scroll

 

 

解释：图片固定不动 | 背景图案跟着移动

 

 

background-position：背景图像位置

属性：

取值：0% 0% |100% 100%  | top left | top center| top right | center left |center center|center right|bottom left| bottom center|bottom right|

 

 

解释：左上角（默认）|右下角  | 左上角 | 中间靠上| 右上角 | 左中部 |正中|右中部|左下角| 底部中间|右下角

 

 

color：文本颜色

属性：

取值：red | #ff0000 | rgb(255,0,0)

 

 

解释：颜色名 | #ff0000 | rgb(255,0,0)

 

 

background-origin： 背景图像定位

如果背景图像的 background-attachment 属性为 "fixed"，则该属性没有效果。

属性：

取值：padding-box | border-box | content-box

 

 

解释：背景图像相对于内边距框来定位| 背景图像相对于边框盒来定位 | 背景图像相对于内容框来定位

 

 

background-size：背景图片的尺寸

属性：

取值：20 20 | 20% 20%  | cover | contain

 

 

解释： 固定数值 | 占父层的百分比例  | 背景图像完全覆盖背景区域 |最大的尺寸，宽度高度完全适应内容区

 

 

background-clip：规定背景的剪裁区域

属性：

取值：border-box  | padding-box  | content-box

解释：背景被裁剪到边框  | 背景被裁剪到内边距，留白  | 背景被裁剪到内容