css背景制作

使用纯色背景

通过background-color属性设置纯色背景，支持颜色名称、十六进制、RGB或HSL值。例如：

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

添加渐变背景

使用linear-gradient或radial-gradient创建渐变效果。线性渐变示例：

div {
  background: linear-gradient(45deg, #ff9a9e, #fad0c4);
}

设置图片背景

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

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

创建纹理或图案

利用CSS生成微小图案（如条纹、网格），减少图片请求。条纹背景示例：

section {
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px
  );
}

使用混合模式叠加

通过background-blend-mode混合多个背景层，实现特殊效果：

.overlay {
  background-image: url("image.png"), linear-gradient(red, yellow);
  background-blend-mode: multiply;
}

固定背景视差效果

background-attachment: fixed使背景固定，内容滚动时产生视差：

.parallax {
  background-image: url("bg.png");
  background-attachment: fixed;
  min-height: 500px;
}

响应式背景控制

结合媒体查询适配不同设备尺寸：

@media (max-width: 768px) {
  .responsive-bg {
    background-image: url("mobile-bg.jpg");
  }
}