背景属性

综合写法

1background: color image repeat attachment position;
2
3注意:
4	如果需要单独的样式和连写:要么把单独的样式写在连写的下面,要么把单独的样式写在连写的里面。

背景颜色

1background-color: transparent | 颜色值;
2
3背景颜色默认值是 transparent(透明)

背景图片

1background-image: none | url( );
2
3注意:
4	背景图片默认是水平或垂直方向平铺的。
5	背景图片仅仅是指给盒子起到装饰效果,类似于背景色,是不能撑开盒子的。
6	背景图片后面的地址,千万不要忘记加url,同时里面路径的引号可以省略。 
7
8img标签和背景图片的区别:
9	img标签是一个标签,不设置宽高默认会以原尺寸显示
10	背景图片需要盒子设置宽高,它只是装饰盒子用的,是不能撑开盒子的。

背景平铺

1background-repeat: repeat | no-repeat | repeat-x | repeat-y;
2
3repeat:默认值。水平和垂直方向都平铺。
4no-repeat:背景图像不平铺。
5repeat-x:背景图像水平平铺。
6repeat-y:背景图像垂直平铺。

背景位置

1background-position: 水平方向位置 垂直方向位置;
2
3background-position-x 水平方向位置
4background-position-y 垂直方向位置
5
6精确单位px
7	第一个值 水平位置 正值向右 负值向左
8	第二个值 垂直位置 正值向下 负值向上
9方位词
10	top center bottom left right
11
12注意:
13	参数是方位名词
14		如果指定的两个值都是方位名词,则两个值前后顺序无关,比如 left top 和 top left 效果一致
15		如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐
16	参数是精确单位
17		如果参数值是精确坐标,那么第一个肯定是 x 坐标,第二个一定是 y 坐标
18		如果只指定一个数值,那该数值一定是 x 坐标,另一个默认垂直居中
19	参数是混合单位
20		如果指定的两个值是精确单位和方位名词混合使用,则第一个值是 x 坐标,第二个值是 y 坐标

背景固定

1background-attachment: scroll | fixed;
2
3scroll:背景图像是随对象内容滚动
4fixed:背景图像固定

背景图片大小

1background-size: 宽度 高度;
2
3数字+px:简单方便,常用
4百分比:相当于当前盒子自身的宽高百分比
5可以使用宽度高度可以用autoß
6contain:包含,将背景图片等比例缩放,直到一条边到达盒子的边缘停止
7cover:覆盖,将背景图片等比例缩放,直到刚好填满整个盒子没有空白

背景色透明度

1background: rgba(0,0,0,0.3);
2
3注意:
4	背景半透明是指盒子背景半透明,盒子里面的内容不受影响
5	CSS3 新增属性,是 IE9+ 版本浏览器才支持的,但是现在实际开发,我们不太关注兼容性写法了,可以放心使用