CSS 背景样式全解析
在网页设计中，背景样式是塑造页面视觉效果的关键元素之一。通过 CSS 的背景属性，我们可以为页面添加丰富的视觉效果，包括背景颜色、背景图片、平铺方式、定位以及固定等。
4.1 背景颜色 (background-color)
背景颜色是最基础的背景属性，用于设置元素的背景色。
div {
width: 200px;
height: 200px;
/* 默认值为 transparent（透明） */
/* background-color: transparent; */
background-color: pink;
}
- 默认值：
transparent（透明） - 可接受的值：颜色名称、十六进制值、RGB 值、RGBA 值
- 应用场景：为元素提供基础底色，或作为背景图片的补充
4.2 背景图片 (background-image)
使用背景图片可以为元素添加更丰富的视觉效果。
#image-test {
width: 200px;
height: 340px;
background-image: url('picture/Q.png');
}
- 语法：
background-image: none | url(图片地址) - 默认值：
none（无背景图） - 实际应用：常用于 logo、装饰性小图片或超大背景图，便于精确控制位置
4.3 背景平铺 (background-repeat)
控制背景图片是否以及如何在元素中平铺。
#image-test {
background-image: url('picture/Q.png');
/* 可选值：repeat | no-repeat | repeat-x | repeat-y */
background-repeat: no-repeat;
}
repeat：默认值，在水平和垂直方向都平铺no-repeat：不平铺，只显示一次- ：仅在水平方向平铺
