12-CSS背景

CSS背景

通过CSS背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图片固定等。

背景颜色

background-color 属性定义了元素的背景颜色。

div {
    background-color: 颜色值;
}

一般情况下元素背景颜色是transparent(透明色)，我们可以手动指定背景颜色为透明色。

背景图片

background-image 属性描述了元素的背景图像，非常便于控制图像位置。

div {
    background-image: url();
}

一般情况下元素背景图片是none(无背景图)，我们可以手动指定背景图片为无背景图。页面元素既可以添加背景颜色也可以添加背景图片，祝不过背景图片会压住背景颜色。

背景图片平铺

如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat 属性。

div {
    background-repeat: no-repeat;
}

repeat :背景图像在纵向和横向上平铺。no-repeat :背景图像不平铺。repeat-x :背景图像在横向上平铺。repeat-y :背景图像在纵向上平铺。

一般情况下元素背景图片是repeat(平铺)，我们可以手动指定背景图片为平铺。

背景图片位置

利用 background-position 属性可以改变图片在背景中的位置。

div {
    background-position: x y;
}

参数值	说明
length	百分数｜有浮点数和单位标识符组成的长度值
Position	top|center|bottom|left|right 方位名词

• 如果参数是方位名词，则两个值前后顺序无关。
• 如果只指定一个方位名词，则第二个值默认为center。
• 如果参数值是精确单位，那么第一个肯定是x坐标，第二个肯定是y坐标。
• 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中。

背景图像固定

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。

div {
    background-attachment: scroll | fixed;
}

参数	作用
scorll	背景图像随对象内容滚动(默认值)
fixed	背景图像固定

背景属性的复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写再同一个属性background中，从而节约代码量。
当使用简写小户型时，没有特定的书写顺序，一般习惯约定顺序为：

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

背景色半透明

CSS3为我们提供了背景颜色半透明的效果。

div {
    background: rgba(0,0,0,0.3);
}

• 最后一个参数是alpha透明度，取值范围在0～1之间。
• 背景半透明是指盒子背景半透明，盒子里面的内容不受影响。

总结

属性	作用	值
background-color	背景颜色	预定的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是x和y坐标
background-attachment	背景附着	scroll(背景滚动)/fixed(背景固定)
background	背景简写	背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
背景色半透明	背景颜色半透明	background: rgba(0,0,0,3);