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
解释:背景被裁剪到边框 | 背景被裁剪到内边距,留白 | 背景被裁剪到内容