css3制作背景

CSS3 制作背景的方法

使用纯色背景
通过 background-color 属性设置纯色背景，支持十六进制、RGB、RGBA、HSL 等格式：

body {
  background-color: #f0f0f0;
}

使用渐变背景
CSS3 支持线性渐变（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;
}

多背景叠加
CSS3 允许为一个元素添加多个背景层，用逗号分隔：

header {
  background: 
    url("pattern.png") repeat,
    linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
}

背景滤镜效果
使用 backdrop-filter 为背景添加模糊或其他滤镜效果（需浏览器支持）：

.modal {
  backdrop-filter: blur(5px);
}

动态背景动画
结合 @keyframes 实现背景颜色或位置的动画效果：

@keyframes bgMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.animated-bg {
  animation: bgMove 10s infinite alternate;
}

响应式背景控制
通过媒体查询调整不同屏幕尺寸下的背景样式：

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

注意事项

• 渐变和复杂背景可能影响性能，需在移动端测试
• 图片背景应优化压缩以减少加载时间
• 使用 background-attachment: fixed 时注意移动端兼容性