背景设置

CSS中，背景主要包括以下几个设置：

• background-color：背景颜色
• background-image：背景图
• background-position：背景位置设置
• background-size：背景大小设置
• background-repeat：背景图重复平铺设置
• background-attachment：背景固定或滚动

background-color

背景颜色设置非常简单，可以使用颜色关键字，十六进制颜色代码，或是RGBA值等指定固定颜色，下面是一个例子：

.bg {
    background-color: red;
}

background-image

背景图片可以通过相对路径和绝对路径来指定。

.bg {
    background-image: url('1.jpg');
}

注意：如果使用相对路径指定，路径是相对CSS文件的URL，而非页面。

background-position

该属性常用于指定背景图片，实现居中，靠顶部等效果。最常见的用法是用top，center等关键字指定，也可以使用百分比或是绝对坐标。

background-size

background-repeat

背景图重复平铺的方式。

background-attachment

该属性经常用于实现页面滚动时，背景图固定的效果。

注意点

1. 设置背景图的属性必须写在其他属性之前
2. background属性是上述属性的组合写法，组合写法可以简化代码

常见用法

下面总结一些常见用法，供开发时随时查阅。

背景图横纵拉伸填满整个div

.bg {
    background-image: url("1.jpg");
    background-size: 100% 100%;
}

背景图居中并保持比例尽量拉伸

.bg {
    background: url("1.jpg") no-repeat center;
    background-size: contain;
}

背景图位置固定且保持比例填满div

.bg {
    background: url("1.jpg") fixed;
    background-size: cover;
}