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");
  }
}