English
资源说明：CSS3中的多背景（multiple backgrounds）功能是CSS2的一个扩展，允许在一个元素上设置多个背景图像，而不是仅限于一个。这一特性极大地增强了网页设计的灵活性和创意性。下面将详细讲解CSS3多背景的使用语法、兼容性和实例应用。
### 一、背景的语法
多背景的语法有两种形式：
1. 分写（Separate Declarations）：
```css
background-image: [background-image], [background-image], [background-image];
background-position: [background-position], [background-position], [background-position];
background-repeat: [background-repeat], [background-repeat], [background-repeat];
```
这种方式允许分别定义每个背景的图像、位置和重复方式。
2. 简写（Shorthand Declaration）：
```css
background: [background-image] [background-position] [background-repeat], [background-image] [background-position] [background-repeat], [background-image] [background-position] [background-repeat];
```
在这种简写形式中，可以一次性定义所有背景的属性，各个背景之间用逗号隔开。
### 二、背景的兼容情况
CSS3的多背景功能在现代浏览器中得到了广泛支持，包括Chrome、Firefox、Safari、Opera以及IE9及以上版本。对于不支持CSS3的旧版浏览器，多背景属性将被忽略，但不会影响到其他CSS2样式的表现。
### 三、背景的实例
#### 1. 圆角效果
以下例子展示了如何使用多背景创建一个带有圆角的自定义边框效果：
```css
.a {
width: 300px;
}
.b {
background: url("left.jpg") no-repeat left top, url("right.jpg") no-repeat right top;
padding: 0 10px;
}
.b div {
background: url("mid.jpg") repeat-x left top;
height: 48px;
}
```
HTML结构：
```html
```
#### 2. 多背景图片
此示例展示了如何通过多背景实现鼠标悬停时背景图片位置的变化：
```css
div {
width: 300px;
height: 80px;
border: 1px solid #000;
background: url("logo.jpg") no-repeat, url("a.jpg") no-repeat right -300px;
-webkit-transition: 0.5s background-position ease;
transition: 0.5s background-position ease;
}
div:hover {
background-position: 0 0, right 0;
}
```
HTML结构：
```html
```
默认状态下，背景图片`logo.jpg`位于左上角，`a.jpg`位于右上角且向右偏移300px。当鼠标悬停在`div`元素上时，`a.jpg`会移动到右上角，形成动画效果。
通过这些实例，我们可以看到CSS3的多背景特性在网页设计中具有很高的实用性。它可以用于创建复杂的边框效果、动态交互以及其他创新设计。由于其广泛的浏览器兼容性，多背景已成为现代网页设计师的必备技能。在实际工作中，鼓励开发者分享更多创意案例，共同推动CSS3技术的发展。
梦龙小站
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
