制作css背景

使用纯色背景

在CSS中，可以通过background-color属性设置纯色背景。颜色可以使用名称、十六进制、RGB或HSL值。

body {
  background-color: #f0f0f0; /* 浅灰色 */
}

使用渐变背景

线性渐变通过linear-gradient()实现，径向渐变使用radial-gradient()。

div {
  background: linear-gradient(to right, #ff7e5f, #feb47b); /* 橙粉色渐变 */
}

添加图片背景

通过background-image引入图片，配合background-size和background-repeat控制显示方式。

header {
  background-image: url("path/to/image.jpg");
  background-size: cover; /* 覆盖整个区域 */
  background-repeat: no-repeat;
}

创建动态背景效果

结合CSS动画（@keyframes）让背景动起来，例如颜色渐变或移动图案。

@keyframes pulse {
  0% { background-color: #ff9a9e; }
  50% { background-color: #fad0c4; }
  100% { background-color: #ff9a9e; }
}
.animated-bg {
  animation: pulse 3s infinite;
}

使用CSS变量灵活调整

通过自定义属性（CSS变量）实现主题切换或动态调整背景。

:root {
  --main-bg-color: #6a11cb;
}
section {
  background-color: var(--main-bg-color);
}

实现视差滚动效果

通过background-attachment: fixed让背景固定，内容滚动时产生视差。

.parallax {
  background-image: url("path/to/image.jpg");
  background-attachment: fixed;
  min-height: 500px;
}