CSS - 12、背景相关属性
在CSS中，背景（Background）相关属性用于设置元素的背景效果，包括背景颜色、背景图片、背景重复、背景定位等。这些属性可以极大地丰富页面的视觉效果。以下是CSS中与背景相关的属性及其使用方法。
1. background-color（背景颜色）
background-color属性用于设置元素的背景颜色。
示例：
div {
background-color: #f0f0f0; /* 十六进制颜色 */
background-color: rgb(240, 240, 240); /* RGB颜色 */
background-color: rgba(240, 240, 240, 0.8); /* 带透明度的RGBA颜色 */
background-color: hsl(0, 0%, 90%); /* HSL颜色 */
background-color: hsla(0, 0%, 90%, 0.8); /* 带透明度的HSLA颜色 */
}
2. background-image（背景图片）
background-image属性用于设置元素的背景图片。
示例：
div {
background-image: url('image.jpg'); /* 设置背景图片 */
background-image: linear-gradient(to right, red, blue); /* 渐变背景 */
}
3. background-repeat（背景重复）
background-repeat属性用于控制背景图片的重复方式。
常用值：
repeat（默认值）：背景图片在水平和垂直方向上重复。no-repeat：背景图片不重复。repeat-x：背景图片仅在水平方向上重复。repeat-y：背景图片仅在垂直方向上重复。
示例：
div {
background-image: url('image.jpg');
background-repeat: no-repeat; /* 背景图片不重复 */
}
4. background-position（背景定位）
background-position属性用于设置背景图片的位置。
常用值：
top left、top center、top rightcenter left、center center、center rightbottom left、bottom center、bottom right- 坐标值（如
10px 20px）
示例：
div {
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: center center; /* 背景图片居中定位 */
}
5. background-size（背景大小）
background-size属性用于设置背景图片的大小。
常用值：
auto（默认值）：背景图片保持原始大小。cover：背景图片扩展以覆盖整个元素区域，可能会裁剪图片。contain：背景图片缩放以适应元素区域，可能会留白。- 具体尺寸（如
100px 200px）。
示例：
div {
background-image: url('image.jpg');
background-size: cover; /* 背景图片覆盖整个元素 */
}
6. background-attachment（背景固定）
background-attachment属性用于设置背景图片是否随滚动条滚动。
常用值：
scroll（默认值）：背景图片随滚动条滚动。fixed：背景图片固定在视口中，不随滚动条滚动。local：背景图片固定在元素内容中，随内容滚动。
示例：
div {
background-image: url('image.jpg');
background-attachment: fixed; /* 背景图片固定在视口中 */
}
7. background（简写属性）
background是一个简写属性，可以同时设置多个背景相关属性。
语法：
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] [background-size];
示例：
div {
background: #f0f0f0 url('image.jpg') no-repeat fixed center center / cover;
/* 等价于： */
background-color: #f0f0f0;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
8. 渐变背景（Gradient Background）
CSS支持渐变背景，包括线性渐变（linear-gradient）和径向渐变（radial-gradient）。
线性渐变：
div {
background: linear-gradient(to right, red, blue); /* 从左到右的渐变 */
background: linear-gradient(to bottom, red, blue); /* 从上到下的渐变 */
}
径向渐变：
div {
background: radial-gradient(circle, red, blue); /* 从中心向外的径向渐变 */
}
9. 多重背景（Multiple Backgrounds）
CSS允许为一个元素设置多个背景图片或渐变。
示例：
div {
background: url('image1.jpg') no-repeat center top,
url('image2.jpg') no-repeat center bottom;
}
10. 示例：综合使用背景属性
以下是一个完整的示例，展示了如何综合使用背景相关属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景属性示例</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
div {
width: 300px;
height: 200px;
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)),
url('background.jpg') no-repeat center center / cover;
color: white;
text-align: center;
line-height: 200px;
font-size: 24px;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div>这是一个带背景的盒子</div>
</body>
</html>
总结
CSS提供了丰富的背景相关属性，用于控制元素的背景效果。以下是主要的背景属性及其用途：
| 属性 | 用途 |
|---|---|
background-color |
设置背景颜色 |
background-image |
设置背景图片 |
background-repeat |
控制背景图片的重复方式 |
background-position |
设置背景图片的位置 |
background-size |
设置背景图片的大小 |
background-attachment |
设置背景图片是否固定 |
background |
简写属性，同时设置多个背景相关属性 |
渐变背景（linear-gradient、radial-gradient） |
创建线性或径向渐变背景 |
| 多重背景 | 为一个元素设置多个背景图片或渐变 |
浙公网安备 33010602011771号