CSS3背景样式详解（图像大小，图像位置等）

CSS3中的背景样式可以通过background属性来设置，它包括图片地址（url）、大小（size）、位置（position）、重复（repeat）等选项。

以下是一些关键的属性和它们的作用：

• background-image: 设置背景图片。
• background-size: 设置背景图片的大小，可以是具体的宽高值或者关键字（如 cover 或 contain）。
• background-position: 设置背景图片的位置，可以是具体的 x 和 y 坐标或者使用关键字（如 top, bottom, left, right, 或 center）。
• background-repeat: 设置背景图片是否和如何重复，可以是 repeat-x, repeat-y, no-repeat 或 repeat。

实例代码：

/* 设置背景图片 */
.element {
  background-image: url('image.jpg');
}
 
/* 设置背景图片大小为宽度100px，高度自动调整以保持图片比例 */
.element-size {
  background-image: url('image.jpg');
  background-size: 100px auto;
}
 
/* 设置背景图片位置为距离元素左上角10px 20px的位置 */
.element-position {
  background-image: url('image.jpg');
  background-position: 10px 20px;
}
 
/* 设置背景图片不重复 */
.element-no-repeat {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
}
 
/* 设置背景图片水平重复，垂直居中 */
.element-repeat-x-center {
  background-image: url('image.jpg');
  background-repeat: repeat-x;
  background-position: center;
}

以上代码展示了如何使用CSS3的背景样式属性来设置元素的背景图片样式。