css背景制作

CSS背景制作方法

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

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

渐变背景
通过linear-gradient或radial-gradient创建渐变效果：

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

图片背景
使用background-image添加图片，可控制平铺和位置：

header {
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
}

多背景层叠加
用逗号分隔多个背景层实现复杂效果：

section {
  background: 
    url("pattern.png") repeat,
    linear-gradient(to right, #a1c4fd, #c2e9fb);
}

动态背景效果
结合CSS动画实现动态背景：

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animated-bg {
  background: linear-gradient(270deg, #ee7752, #e73c7e);
  background-size: 200% 200%;
  animation: gradientShift 15s ease infinite;
}

背景混合模式
使用background-blend-mode实现颜色混合：

.blend {
  background-image: url("texture.jpg");
  background-color: rgba(255,0,0,0.3);
  background-blend-mode: multiply;
}