如何制作背景css

制作背景 CSS 的方法

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

body {
  background-color: #f0f0f0;
}

使用图片背景
通过 background-image 属性设置图片背景，可结合 background-repeat、background-size 和 background-position 调整显示效果。

body {
  background-image: url("image.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

使用渐变背景
通过 linear-gradient 或 radial-gradient 创建渐变背景。

body {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

多背景叠加
使用逗号分隔多个背景属性，实现叠加效果。

body {
  background: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("image.jpg") center/cover no-repeat;
}

固定背景（视差效果）
通过 background-attachment: fixed 固定背景图位置。

body {
  background-attachment: fixed;
}

响应式背景
使用媒体查询适配不同屏幕尺寸。

@media (max-width: 768px) {
  body {
    background-size: contain;
  }
}