1. 背景颜色（Background Color）：
- 使用 background-color 属性可以设置元素的背景颜色。
.element {
background-color: #3498db;
}
2. 背景图片（Background Image）：
- 使用 background-image 属性可以设置元素的背景图片。
.element {
background-image: url('background.jpg');
}
3. 背景重复（Background Repeat）：
- 使用 background-repeat 属性可以控制背景图片的平铺方式。
.element {
background-repeat: repeat-x; /* 水平方向重复 */
}
4. 背景定位（Background Position）：
- 使用 background-position 属性可以设置背景图片的位置。
.element {
background-position: center top; /* 居中顶部 */
}
5. 背景大小（Background Size）：
- 使用 background-size 属性可以设置背景图片的大小。
.element {
background-size: cover; /* 完全覆盖元素 */
}
6. 背景混合模式（Background Blend Mode）：
- 使用 background-blend-mode 属性可以指定背景图片与元素背景颜色的混合模式。
.element {
background-blend-mode: multiply;
}
7. 渐变背景（Gradient Background）：
- 使用 linear-gradient 或 radial-gradient 可以创建渐变背景。
.element {
background: linear-gradient(to right, #3498db, #2ecc71);
}
8. 多重背景图层（Multiple Background Layers）：
- 使用 background 属性可以同时设置多个背景图层。
.element {
background: url('bg1.jpg') center/cover, url('bg2.jpg') left/top no-repeat;
}
这些属性的组合和使用可以创造出丰富多彩的背景效果，增强页面的视觉吸引力。CSS3 背景属性的灵活性使得开发者可以更方便地实现各种设计需求。
转载请注明出处：http://www.zyzy.cn/article/detail/4058/CSS