CSS的背景

1. 背景颜色background-color

div {     background-color: 颜色值; } 

一般情况下元素背景颜色默认是transparent（透明）。

2. 背景图片background-image

div {     background-image: none或url(图片的url); } 

注：

• 实际开发中常见于logo、一些装饰性的小图片，或着是超大的背景图片
• 优点是非常便于控制位置，例如运用在精灵图上

3. 背景平铺background-repeat

div {     background-repeat: repeat或no-repeat或repeat-x或repeat-y; } 

4. 背景图片位置background-position

div {     background-position: x y; } 

参数代表的意思是：x坐标和y坐标。可以使用方位名词或精确单位。

1. 参数是精确单位时：
   • 第一个是x坐标，第二个是y坐标
   • 如果只指定一个数值，则该数值一定是x坐标，另一个默认垂直居中
2. 参数是方位名词时：
   • 如果指定了两个方位名词，则两个值的顺序无关
   • 如果只指定了一个方位名词，则第二个值默认居中对齐
3. 参数是混合单位时：
   • 第一个值是x坐标，第二个值是y坐标

5. 背景图像固定(背景附着)background-attachment

用于设置背景图像是否固定或随着页面的其余部分移动。

后期可以制作视差滚动的效果。

div {     background-attachment: scroll或fixed; } 

6. 背景复合写法

当使用简写时，没有特定的书写顺序，提倡顺序为：

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

7. 背景色半透明

background: rgba(0,0,0,0.3); 

注：

• 最后一个参数是alpha（透明度），取值范围在0~1之间
• 可以把最后一个参数0.3的0省略，写为.3
• rgba必须是4个值
• 盒子背景半透明，盒子里面的内容不受影响
• 这是CSS3新增属性，ie9+才支持

8. 总结