1. 背景background
在CSS中，我们可以使用background属性来设置元素的背景。背景可以是颜色、图像、渐变或者是组合它们的一种或多种方式。
1.1 背景颜色
我们可以使用background-color属性来设置元素的背景颜色。
div {
background-color: #F0F0F0;
}
在上述代码中，我们将div元素的背景颜色设置为#F0F0F0，这是一个浅灰色。
1.2 背景图像
背景图像可以通过background-image属性来设置。我们可以使用相对或绝对URL来指定图像的路径。
div {
background-image: url("example.jpg");
}
上述代码将div元素的背景图像设置为example.jpg。
1.3 背景重复
当背景图像的尺寸小于元素的尺寸时，我们可以使用background-repeat属性来控制背景图像的重复方式。
div {
background-repeat: repeat-x;
}
上述代码将背景图像在水平方向上重复。
1.4 背景固定
有时候，我们希望背景图像在滚动页面时保持固定。这可以通过background-attachment属性来实现。
div {
background-attachment: fixed;
}
上述代码将背景图像固定在元素中不随页面滚动。
1.5 背景尺寸
我们可以使用background-size属性来控制背景图像的尺寸。
div {
background-size: cover;
}
上述代码将背景图像自适应元素的尺寸，并保持纵横比。
2. 背景位置background-position
background-position属性用于控制背景图像在元素中的位置。
2.1 关键字
div {
background-position: top right;
}
上述代码将背景图像放置在元素的右上角。
2.2 百分比
div {
background-position: 50% 50%;
}
上述代码将背景图像的中心点放置在元素的中心。
2.3 像素值
div {
background-position: 10px 20px;
}
上述代码将背景图像的左上角放置在距离元素左边10像素，距离元素上边20像素的位置。
2.4 水平和垂直方向分别设置
div {
background-position: right 10px bottom 20px;
}
上述代码将背景图像的右边缘与元素的右边缘对齐，并且距离元素底边20像素，距离元素顶边10像素。
2.5 百分比和像素值混合使用
div {
background-position: center 20px;
}
上述代码将背景图像的水平方向居中，距离元素顶边20像素。