制作css背景

使用纯色背景

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

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

添加渐变背景

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

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

插入图片背景

通过background-image引入图片，可调整平铺、位置和大小。

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

创建动态动画背景

结合CSS动画实现动态效果，如颜色渐变或移动背景。

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

使用网格或图案背景

通过重复的CSS图案或SVG生成复杂背景。

.pattern-bg {
  background: 
    repeating-linear-gradient(45deg, #eee 0px, #eee 10px, #ddd 10px, #ddd 20px);
}

响应式背景设计

通过媒体查询适配不同设备屏幕尺寸。

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