1. 设置背景颜色
.element {
background-color: #f0f0f0;
}
2. 设置背景图像
.element {
background-image: url('background.jpg');
}
3. 设置背景重复方式
.element {
background-repeat: repeat; /* 默认值，平铺重复 */
/* 或 */
background-repeat: no-repeat; /* 不重复 */
background-repeat: repeat-x; /* 水平重复 */
background-repeat: repeat-y; /* 垂直重复 */
}
4. 设置背景大小
.element {
background-size: auto; /* 默认值，保持图像原始大小 */
background-size: cover; /* 拉伸或缩放图像，保持其宽高比填充整个容器 */
background-size: contain; /* 拉伸或缩放图像，保持其宽高比适应容器 */
background-size: 50% 50%; /* 设置宽度和高度的百分比值 */
}
5. 设置背景位置
.element {
background-position: center; /* 默认值，居中对齐 */
background-position: top left; /* 设置左上角对齐 */
background-position: right bottom; /* 设置右下角对齐 */
background-position: 50% 50%; /* 设置水平和垂直方向的百分比值 */
}
6. 合并多个属性
.element {
background: #f0f0f0 url('background.jpg') no-repeat center / cover;
}
在这个例子中，background属性合并了多个背景相关的属性，分别设置了背景颜色、图像、不重复、居中对齐、cover大小。
这只是background属性的一些基础用法，你可以根据需要灵活组合这些属性来实现各种背景效果。深入学习和实践将帮助你更好地掌握CSS中背景的使用。
转载请注明出处：http://www.zyzy.cn/article/detail/3995/CSS