制作css背景

使用纯色背景

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

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

添加渐变背景

使用 linear-gradient 或 radial-gradient 创建渐变效果。

div {
  background: linear-gradient(to right, #ff9966, #ff5e62);
}

使用图片背景

通过 background-image 属性引入图片，并设置平铺、位置和大小。

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

创建动态背景动画

结合 @keyframes 实现背景动画效果。

@keyframes colorShift {
  0% { background-color: #ff9966; }
  50% { background-color: #ff5e62; }
  100% { background-color: #ff9966; }
}
.animated-bg {
  animation: colorShift 5s infinite;
}

使用 CSS 变量控制背景

通过自定义变量灵活调整背景属性。

:root {
  --main-bg-color: #e0e0e0;
}
.container {
  background-color: var(--main-bg-color);
}

实现颗粒感/噪点背景

通过伪元素和 background-image 生成噪点纹理。

.noise-bg {
  position: relative;
}
.noise-bg::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,...");
  opacity: 0.1;
}