English
资源说明：原文：http://www.planabc.net/2008/04/14/background-clip_background-origin/background-clip 和 background-origin 是 CSS3 中新加的 background module 属性，用来确定背景的定位。background-clip 用来判断 background 是否包含 border 区域。而 background-or
在CSS3中，`background-clip`和`background-origin`是两个重要的背景属性，它们用于控制元素背景的显示范围和定位基准。这两个属性是CSS3背景模块新增的功能，旨在提供更精细的背景图像控制。
`background-clip`属性决定了背景是否延伸到边框区域。默认情况下，背景颜色或图像会填充内边距盒（padding-box），但不会延伸到边框。如果设置`background-clip`为`border`，背景会包括边框区域；若设置为`padding`，则背景只显示在内边距区域内，边框将是透明的。如果有多个背景图像，每个图像的`background-clip`值可以用逗号分隔。
例如：
```css
div {
background-color: red;
background-clip: border-box; /* 背景包含边框 */
}
```
在这个例子中，红色背景将延伸到边框的边缘。
`background-origin`属性定义了背景图像的位置计算基准。默认情况下，`background-position`的值相对于内边距盒（padding-box）定位。如果设置`background-origin`为`padding`，则位置坐标以内边距区的左上角为原点；若设为`border`，则以边框的左上角为原点；若设为`content`，则以内容区的左上角为原点。同样，如果有多个背景图像，每个图像的`background-origin`值也可以用逗号分隔。
例如：
```css
div {
background-image: url(image.jpg);
background-position: top left;
background-origin: content-box; /* 背景位置相对于内容区 */
}
```
在这个例子中，背景图像的位置计算将基于内容区的左上角。
在不支持`background-clip`和`background-origin`属性的浏览器中，通常会退回到CSS2.1的行为，即`background-clip`默认类似`border-box`，`background-origin`默认类似`padding-box`。然而，Internet Explorer（尤其是IE6和IE7）的处理方式有所不同，对于某些元素，其背景表现可能与CSS2.1的标准行为相异。
为了让这些属性在不同的浏览器中生效，可以使用各浏览器的私有前缀。例如，对于Mozilla Firefox，可以使用`-moz-background-clip`和`-moz-background-origin`；对于Webkit（Safari和Chrome），可以使用`-webkit-background-clip`和`-webkit-background-origin`。需要注意的是，这些私有属性的使用是为了向后兼容，随着浏览器对CSS3支持的增强，它们的重要性正在逐渐降低。
`background-clip`和`background-origin`提供了更丰富的背景设计可能性，让开发者能够更精确地控制元素背景的显示效果，从而实现更具创新性的网页设计。结合`background-position`和其他背景属性，可以创建出丰富多样的视觉体验。在实际应用中，应考虑到不同浏览器的兼容性问题，适当地使用私有属性和条件注释来确保在各种环境下都能正常显示。
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
