CSS背景相关知识

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;
}