CSS3 新增属性：背景，笔记分享

CSS3 中的背景相关属性包括：

1. background-size: 指定背景图片的大小，可以是具体的宽高值或者是百分比，还可以是cover和contain这两个特殊的值。
2. background-origin: 指定背景图片的定位区域，可以是边框盒、内边距盒或者是内容盒。
3. background-clip: 指定背景的裁剪区域，同样可以是边框盒、内边距盒或者是内容盒。
4. background-image: 可以设置多个背景图片，用逗号隔开。
5. linear-gradient 和 radial-gradient: 创建线性和径向渐变的背景。

示例代码：

/* 设置背景图片并重复 */
.element {
  background-image: url('image.jpg');
  background-repeat: repeat-x;
}
 
/* 使用渐变作为背景 */
.gradient-background {
  background-image: linear-gradient(to right, red, yellow);
}
 
/* 设置背景大小，保持宽高比 */
.background-size {
  background-size: 150% auto; /* 宽度为原来的150%，高度自动保持宽高比 */
}
 
/* 设置背景的定位区域为内容盒 */
.background-origin {
  background-origin: content-box;
}
 
/* 设置背景的裁剪区域为内容盒 */
.background-clip {
  background-clip: content-box;
}
 
/* 多背景图片 */
.multiple-backgrounds {
  background-image: url('first.jpg'), url('second.jpg');
  background-position: left bottom, right top;
}

这些属性可以让你创建更加丰富和灵活的背景样式。