CSS的背景

CSS的背景

1. 背景颜色background-color

div {
    background-color: 颜色值;
}

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

2. 背景图片background-image

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

参数值	作用
none	无背景图（默认值）
url	背景图片的url地址

注：

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

3. 背景平铺background-repeat

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

参数值	作用
repeat	背景图片在纵向和横向上平铺（默认值）
no-repeat	不平铺
repeat-x	在横向上平铺
repeat-y	在纵向上平铺

4. 背景图片位置background-position

div {
    background-position: x y;
}

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

参数值	说明
length（精确单位）	百分数，或具体数值（记得加px）
position（方位名词）	top,center,bottom,left,right

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

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

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

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

div {
    background-attachment: scroll或fixed;
}

参数	作用
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. 总结

属性	作用	值
background-color	背景颜色	预定义颜色值、十六进制、rgb代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat、no-repeat、repeat-x、repeat-y
background-position	背景位置	length、position，分别是x和y坐标，单位px
background-attachment	背景附着	scroll、fixed