CSS之背景的设置 ：background-(image、repeat、size、position、attachment)、background、background-image和img对比

在CSS中，我们可以使用background-image属性来设置元素的背景图像，background-repeat属性来设置背景图像是否及如何重复，background-size属性来设置背景图像的尺寸，background-position属性来设置背景图像的位置，background-attachment属性来设置背景图像是否固定或者随着页面的其余部分滚动。

以下是一些示例代码：

/* 设置背景图片 */
.example1 {
  background-image: url('image.jpg');
}
 
/* 设置背景图片不重复，并且在水平方向和垂直方向上居中 */
.example2 {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: center center;
}
 
/* 设置背景图片不重复，并且在水平方向和垂直方向上居中，并且背景图片的尺寸被设置为覆盖整个元素 */
.example3 {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
 
/* 设置背景图片不重复，并且在水平方向和垂直方向上居中，并且背景图片的尺寸被设置为保持原有尺寸 */
.example4 {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
 
/* 设置背景图片固定，不随页面滚动 */
.example5 {
  background-image: url('image.jpg');
  background-attachment: fixed;
}

在这些例子中，.example1 仅设置了背景图像，其余例子展示了如何调整背景图像的显示方式。通过组合这些属性，你可以创建出各种各样的背景样式。