CSS|06 背景样式

在CSS中，背景样式可以通过多个属性来定义，包括background-color、background-image、background-repeat、background-position和background-size等。

以下是一个简单的例子，展示了如何设置元素的背景样式：

/* 设置背景颜色为天蓝色 */
.element {
  background-color: skyblue;
}
 
/* 设置背景图片，不重复，位置在中心，并且背景颜色将在图片下面显示 */
.element-with-image {
  background-image: url('path/to/image.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-color: skyblue;
}
 
/* 设置背景图片，重复横向，并且背景颜色将在图片下面显示 */
.element-with-repeated-image {
  background-image: url('path/to/image.jpg');
  background-repeat: repeat-x;
  background-color: skyblue;
}
 
/* 设置背景图片，不重复，并且背景图片将在元素的右下角显示 */
.element-with-specific-position {
  background-image: url('path/to/image.jpg');
  background-repeat: no-repeat;
  background-position: bottom right;
}
 
/* 设置背景图片，不重复，并且背景图片将在元素的中心，且图片尺寸将填满整个元素 */
.element-with-cover-sizing {
  background-image: url('path/to/image.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
 
/* 设置背景图片，不重复，并且背景图片将在元素的中心，且图片将被拉伸以完全适应元素的宽度 */
.element-with-contain-sizing {
  background-image: url('path/to/image.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

在这个例子中，.element类设置了一个简单的背景颜色，.element-with-image类设置了背景颜色与背景图片，并且背景图片不会重复。其他类通过不同的方式调整了背景图片的显示，包括改变背景图片的位置、重复方式和尺寸。