浅谈CSS3中新增的背景属性

在CSS3中，新增了许多背景属性，这些属性使得我们能够更加灵活和方便地控制网页元素的背景，下面我们将详细介绍这些新增的背景属性。

1. 背景图片大小调整（backgroundsize）

通过backgroundsize属性，我们可以调整背景图片的大小，这个属性有以下几个值：

length：设置背景图片的宽度和高度。

%：设置背景图片相对于父元素的宽度和高度的百分比。

cover：保持背景图片的宽高比，使其完全覆盖容器。

contain：保持背景图片的宽高比，使其被容器完全包含。

backgroundsize: 100px 200px;
backgroundsize: 50% 100%;
backgroundsize: cover;
backgroundsize: contain;

2. 背景图片定位（backgroundorigin）

通过backgroundorigin属性，我们可以调整背景图片的定位，这个属性有以下几个值：

paddingbox：背景图片相对于元素的内边距框定位。

borderbox：背景图片相对于元素的边框盒定位。

contentbox：背景图片相对于元素的内容框定位。

backgroundorigin: paddingbox;
backgroundorigin: borderbox;
backgroundorigin: contentbox;

3. 背景图片裁剪（backgroundclip）

通过backgroundclip属性，我们可以裁剪背景图片，这个属性有以下几个值：

borderbox：背景图片会被裁剪到边框盒。

paddingbox：背景图片会被裁剪到内边距框。

contentbox：背景图片会被裁剪到内容框。

text：背景图片只会显示在文本下方。

backgroundclip: borderbox;
backgroundclip: paddingbox;
backgroundclip: contentbox;
backgroundclip: text;

4. 多重背景（background）

通过background属性，我们可以为元素添加多重背景，这个属性可以同时设置多个背景图片、颜色、重复方式等。

background: url(image1.jpg) norepeat, url(image2.jpg) repeatx, red;

归纳一下，CSS3中新增的背景属性为我们提供了更多的选择和灵活性，使得我们能够更好地控制网页元素的背景。