CSS3新增背景属性

CSS3中新增了一些背景相关的属性，以下是一些常见的新增背景属性及其使用示例：

1. background-size: 可以指定背景图片的大小，可以设置为具体的宽高值或者使用诸如cover和contain这样的关键字。

/* 指定背景图片的大小 */
div {
  background-image: url('image.jpg');
  background-size: 150px 100px; /* 宽度150px，高度100px */
}
 
/* 使用关键字cover使背景图片覆盖整个元素，可能会被裁剪 */
div {
  background-image: url('image.jpg');
  background-size: cover;
}
 
/* 使用关键字contain使背景图片缩放到适合元素尺寸的最大尺寸，无裁剪 */
div {
  background-image: url('image.jpg');
  background-size: contain;
}

2. background-origin: 可以指定背景图片的起始位置，可以设置为border-box, padding-box, 或者content-box。

/* 背景图片的起始位置在边框盒 */
div {
  background-image: url('image.jpg');
  background-origin: border-box;
}
 
/* 背景图片的起始位置在内填充盒 */
div {
  background-image: url('image.jpg');
  background-origin: padding-box;
}
 
/* 背景图片的起始位置在内容盒 */
div {
  background-image: url('image.jpg');
  background-origin: content-box;
}

3. background-clip: 可以指定背景的裁剪区域，同样可以设置为border-box, padding-box, 或者content-box。

/* 背景裁剪在边框盒之外 */
div {
  background-color: red;
  background-clip: border-box;
}
 
/* 背景裁剪在内填充盒之外 */
div {
  background-color: red;
  background-clip: padding-box;
}
 
/* 背景裁剪在内容盒之外 */
div {
  background-color: red;
  background-clip: content-box;
}

4. background-break: 用于控制背景图片的行为，当内容宽度超过视口时。

/* 背景图片在内容宽度超过视口时不会重复 */
div {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-break: clone;
}

5. background-attachment: 可以设置背景是否随页面滚动。

/* 背景固定，不随页面滚动 */
div {
  background-image: url('image.jpg');
  background-attachment: fixed;
}
 
/* 背景相对于元素固定，不随元素滚动 */
div {
  background-image: url('image.jpg');
  background-attachment: local;
}

6. background-repeat: 可以设置背景图片的重复方式。

/* 背景图片不重复 */
div {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
}
 
/* 背景图片横向重复 */
div {
  background-image: url('image.jpg');
  background-repeat: repeat-x;
}
 
/* 背景图片纵向重复 */
div {
  background-image: url('image.jpg');
  background-repeat: repeat-y;
}
 
/* 背景图片在水平方向和垂直方向上都重复 */
div {
  background-image