css怎么制作背景
使用纯色背景
在CSS中，可以通过background-color属性设置纯色背景。颜色可以使用名称、十六进制值、RGB或HSL格式。
body {
background-color: #f0f0f0; /* 十六进制 */
}
div {
background-color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
}使用图片背景
通过background-image属性添加图片背景，结合background-repeat、background-size等属性调整显示效果。
body {
background-image: url("image.jpg");
background-repeat: no-repeat; /* 禁止重复 */
background-size: cover; /* 覆盖整个区域 */
background-position: center; /* 居中显示 */
}渐变背景
CSS支持线性渐变（linear-gradient）和径向渐变（radial-gradient）。
div {
background: linear-gradient(to right, #ff7e5f, #feb47b);
}
section {
background: radial-gradient(circle, #e66465, #9198e5);
}多背景叠加
通过逗号分隔多个背景属性，实现叠加效果。
header {
background:
linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url("pattern.png");
}固定背景（视差效果）
使用background-attachment: fixed让背景固定，内容滚动时背景不动。
main {
background-image: url("parallax.jpg");
background-attachment: fixed;
height: 100vh;
}动态背景（动画或视频）
通过CSS动画或HTML5视频实现动态背景。
@keyframes colorShift {
0% { background-color: #ff9a9e; }
50% { background-color: #fad0c4; }
100% { background-color: #ff9a9e; }
}
.animated-bg {
animation: colorShift 5s infinite;
}响应式背景
使用媒体查询（@media）适配不同设备尺寸。
.hero {
background-image: url("large-bg.jpg");
}
@media (max-width: 768px) {
.hero {
background-image: url("small-bg.jpg");
}
}
