CSS背景属性

CSS的背景

背景颜色

background-color: transparent | rgb(0,0,0) | bgra(255,255,255,0.5)

transparent为默认值，即透明。

bgra中最后一个值为alpha不透明度，在0~1之间，通常可以将0.5写为.5

设置透明度时盒子中的其它属性如文字图片不受影响。

背景图片

background-image属性描述元素的背景图像。常用于logo或一些装饰小图片或者超大背景图。方便控制位置。

background-image: none | url(图片url路径)

|表示或者，使用一个属性值即可。

none为无背景图，为默认值。

背景平铺

background-repeat: repeat | no-repeat | repeat-x | repeat-y;

默认值为repeat，即平铺整个盒子。

no-repeat为不平铺，repeat-x和repeat-y分别是x轴平铺忽然y轴平铺。

使用背景图片后仍然可以设置盒子颜色。

背景图片位置

background-position: x, y;
background-position: left top;
background-position: 20px 50px;

x与y的值可以是精确数字，也可以是方位名词，例如x的方位名词有：left,center,right。

y的方位名词有：top,center,bottom。

1. 若x,y都是方位名词，则x,y的前后书写顺序随意，且只写一个方位名词时另外一个默认为center居中。
2. 若x,y为精确值，则x在前，y在后。单位为px，若只指定一个值，则该值一定为x坐标，另一个值默认垂直居中。
3. 若x,y为混合单位，即一个为方位名词另一个为精确值，则x在前，y在后。

背景图像固定

background-attachment: scroll | fixed

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

scroll（默认值）是随页面剩余部分滚动，fixed是背景图像固定。

背景属性复合写法

可以将各个背景属性写成一行，没有特定的书写顺序，一般顺序为：

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
background: transparent url(image.jpg) repeat fixed top;