一、背景图片(background-image)

1.1 使用背景图片

element {
  background-image: url('image-source');
}

1.2 背景图片大小(background-size)

element {
  background-size: cover; /* 保持图片宽高比,完全覆盖元素 */
  background-size: contain; /* 保持图片宽高比,使图片完全适应元素 */
  background-size: 100% 100%; /* 设置图片宽高为元素的100% */
}

二、背景重复(background-repeat)

2.1 控制背景图片的重复

element {
  background-repeat: no-repeat; /* 不重复 */
  background-repeat: repeat; /* 水平和垂直方向重复 */
  background-repeat: repeat-x; /* 水平方向重复 */
  background-repeat: repeat-y; /* 垂直方向重复 */
}

三、背景位置(background-position)

3.1 设置背景图片的位置

element {
  background-position: top left; /* 设置为左上角 */
  background-position: bottom right; /* 设置为右下角 */
  background-position: center; /* 设置为居中 */
  background-position: 50% 50%; /* 设置为元素中心 */
}

四、背景颜色(background-color)

4.1 设置背景颜色

element {
  background-color: #fff; /* 设置为白色 */
}

五、透明度(background-opacity)

5.1 设置背景图片的透明度

element {
  background-color: rgba(255, 255, 255, 0.5); /* 设置背景颜色为半透明 */
}

使用rgba颜色模式可以设置背景颜色的透明度。

六、综合示例

.container {
  background-image: url('background.jpg');
  background-color: rgba(0, 0, 0, 0.2); /* 半透明的黑色 */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}