background背景 背景共分为以下8个属性 background-color:背景颜色 background-image:背景图片 background-repeat:背景图片重复 background-position:背景图片位置 background-size:背景图片尺寸 background-attachment:背景图片是否固定不动 background-clip:背景覆盖区 background-origin:背景图片覆盖区 其中常用的是 background-color，background-image，background-repeat，background-position background-color:
颜色名称，如:background-color:red(背景颜色是红色) * 十六进制背景色，如:background-color:#ff0000;/background-color:#f00;(#后面有三个字符说明每两个是相同的，也就是#f00相当于#ff0000) * rgb颜色，这里如果是rgba，a表示透明程度，0表示全透明，1表示完全不透明，如：background-color:rgba(255,0,0,0.5); * transparent,透明，如：background-color:transparent;
background-image: * url图片地址，可以多个图片,如：background-image:url(img/a.jpg),url(img/b.jpg) * none，不显示背景图像
background-image与background-color联合使用，保证在出现以下几种情况下，有背景色可以填充 (1)图片出不来(可能路径错，图片不存在) (2)图片被误删除 (3)图片在不平铺的情况下覆盖不了整个盒子 background-repeat: * repeat:水平和垂直方向都重复图像，如：background-repeat:repeat; * repeat-x:水平方向重复图像 * repeat-y:垂直方向重复图像 * no-repeat:图像不重复
background-position： * 位置名字组合定位，只写一个默认另一个为居中，如：background-position:right bottom;/background-position:center; * 百分比位置，如:background-position:20% 20%； * 具体像素位置，如：background-position:20px 20px;
background-attachment: * scroll:背景图像相对于页面不动，会随着网页的滚动而移动，默认 * fixed:背景图像相对于浏览器窗口不动，内容滚动的时候背景图像不动，如：background-attachment:fixed;
background-size： * 像素大小，只写一个默认另一个为auto，如：background-size:200px 100px; * 百分比大小，如：background-size:60% 60%; * cover:背景图像覆盖当前元素的所有背景区域，如:background-size:cover; * contain:图像显示最大且刚好完全显示，一般不能覆盖全部背景区
background-clip： * border-box:背景覆盖到边框区域，如：background-clip:border-box; * padding-box:背景覆盖到padding区域 * contect-box:背景只覆盖到content区域
background-origin： * border-box:背景图像的起始位置在边框处，如:background-origin:border-box; * padding-box:背景图像的起始位置从padding处开始 * content-box:背景图像的起始位置从content处开始
该属性从ie9开始支持 background简写：(中间用空格隔开) background:(background-color)(background-image)(background-repeat)(background-position)(background-size) 例： .box { height: 400px; background-color: #e8e8e8; background-image: url('www.baidu.com/XXXX.jpg');可以加单引号也可以不加 background-repeat: no-repeat; background-position: center center; background-size: 100px 100px; } 可以简写为: .box { height: 400px; background: #e8e8e8 url('www.baidu.com/XXXX.jpg') no-repeat center center/100px 100px; }
