CSS背景

1.背景颜色background-color:red/#ccc/rgb/rgba

2.背景图片background-image：url(图片地址)

常见于logo或者装饰性的小图片或者超大的背景图片

3.背景平铺background-repeat

background-repeat:repeat/no-repeat/repeat-x(沿水平平铺)/repeat-y（沿垂直方向）

4.background-position

background-position:x y;

另一种写法：background-position-x:left

background-position-y:bottom

参数值	说明
length	x y
position	top|center|bottom|left|center|right

     在盒子模型里，如div,其左上角是0 0点 向下x值变大，向右y值变大

（1） 参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致

如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

（2）参数是精确单位

如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标

如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

（3）参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

注：若x和y,两个数值（如30px 30px)都是一样 不可以合二为一的写法 只能分开写,但两个方向关键词是center可以直接写一个center

5.background-size

两个值，一个表宽度，一个表高度

background-size如果只写一个值 比如60% 那么表示的意思是背景图的宽度按照盒子（div）宽度的60% 高度自动适应div 也就是auto 可以理解为等比例缩放.

设置为百分比，这个百分比是相对于盒子而言的

Background-size:60%=background-size:60 auto

6.背景属性的复合性写法

顺序一般为 （不做强制性要求）

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;