CSS中各种背景相关的操作实践

CSS中的背景颜色

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

默认值是transparent，透明色。

CSS3为我们提供了背景颜色半透明的效果：rgba(0,0,0,.3)——黑色半透明，a的取值范围在0-1之间，0.3习惯性省略0。

1
2
3

div {
    background-color: rgba(0, 0, 0, .3);
}

CSS中的背景图像

background-image属性定义了元素的背景图像，背景图像会盖住背景颜色。

none——默认值。

url——使用绝对路径或相对路径指定背景图片。

div {
    width: 958px;
    height: 958px;
    background-image: url("image.jpg");
}

CSS中的背景平铺

可使用background-repeat对背景图像进行平铺。

repeat——默认，横纵向都平铺。
no-repeat——不平铺。
repeat-x——横向平铺。
repeat-y——纵向平铺。

div {
    width: 958px;
    height: 958px;
    background-image: url("image.jpg");
    background-repeat: repeat;
}

CSS中的背景图像位置

background-position属性（x y）可以设置图像在背景中的位置。

length——百分数、由浮点数字和单位标识符组成的长度值。

position——top、bottom、left、right、center 方位名词。

参数是方位名词：
如果两个值都是方位名词，则两个值的顺序不重要，比如left top 和 top left效果一致。
如果只有一个方位名词，另一个省略，则第二个值默认为center。
参数是精确单位：
第一个是x坐标，第二个是y坐标。
如果只有一个值，则这个值规定为x坐标，y坐标默认为垂直居中。
参数是混合单位：
默认第一个是x坐标，第二个是y坐标。

div {
    width: 958px;
    height: 958px;
    background-image: url("image.jpg");
    background-repeat: repeat;
    background-position: 0 0;
}

CSS中的背景图像固定

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

可制作视差滚动的效果。

fixed——背景图像固定。
scroll——滚动。

div {
    width: 958px;
    height: 958px;
    background-image: url("image.jpg");
    background-repeat: repeat;
    background-position: 0 0;
    background-attachment: scroll;
}