背景总结
一 背景位置 [ 难点]
background-position：X坐标 Y坐标; [ 参数可以使用方位名词 和 精确数值 ]
精确数值: 百分数 或整数和单位标识组成的长度值 方位名词: top center bottom left right
1） 使用前提
必须先指定 background-image属性
2）参数是方位名词
1 如果只指定了一个方位名词，另一个值默认居中对齐 [50% ]
2 left top = top left 顺序前后都可以
3）参数是数值
background-position: 50px; //水平50px 垂直居中
如果只指定一个数值单位，该数值用于X坐标，Y坐标默认居中 [50%]
4.4）参数混用
//X轴是数字 Y轴只能是 top center bottom
backgrount-position: 50px top|center|middle;
//Y轴是数字 X轴只能是 left center right
backgrount-position: left|center|right 50px;
4.5）常用场景
超大背景图 1920 * 1080
background-position: center top;
我们为了照顾所有的屏幕分辨率，设置背景图水平居中，保证最重要的信息都可以展示。
二 常用背景设置
1）背景颜色
background-color: 预定义的颜色值|十六进制|RGB代码; //默认值 transparent 透明色
2）背景图片
background-image: url(图片路径);
//默认值 none
//路径地址不需要加引号
//背景图片优先级高于背景颜色
3）背景平铺
background-repeat: repeat //1 水平垂直平铺 [ 默认值 ] no-repeat //2 不平铺 repeat-x //3 水平平铺 repeat-y //4 垂直平铺
4）背景附着
1 背景滚动 background-attachment: scroll; [ 默认值 ]
2 背景固定 background-attachment：fixed;
5）简写
background: pink url(image/bird.png) no-repeat fixed center center;
//推荐书写顺序: 1 背景颜色 2 背景图片 3 背景平铺 4 背景滚动 5 背景位置
6）背景透明
CSS3的书写 IE9以下不支持
background: rgba(0,0,0,0.3);//是盒子背景的帮透明 而非盒子内容半透明
rgba red红色 green绿色 blue蓝色 alpha透明度 ( 取值0-1 ) 0.3表示透明度30%