纯css制作背景

使用纯CSS制作背景的方法

单色背景

通过background-color属性可以快速设置纯色背景。例如：

body {
  background-color: #f0f8ff; /* 浅蓝色背景 */
}

渐变背景

CSS线性渐变和径向渐变可以创建平滑过渡效果：

.gradient-bg {
  background: linear-gradient(to right, #ff7e5f, #feb47b); /* 水平渐变 */
}

.radial-bg {
  background: radial-gradient(circle, #e0f7fa, #80deea); /* 圆形径向渐变 */
}

图案背景

通过CSS的repeating-linear-gradient可以创建条纹或格子效果：

.stripes {
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px
  );
}

图像背景

使用background-image属性加载图片，并配合其他属性控制显示：

.image-bg {
  background-image: url('texture.jpg');
  background-size: cover; /* 覆盖整个元素 */
  background-repeat: no-repeat;
  background-position: center;
}

动态背景

通过CSS动画让背景产生动态效果：

@keyframes pulse {
  0% { background-color: #ffcdd2; }
  50% { background-color: #ef9a9a; }
  100% { background-color: #ffcdd2; }
}

.animated-bg {
  animation: pulse 3s infinite;
}

多背景叠加

CSS支持多个背景层叠加：

.layered-bg {
  background: 
    linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0.7)),
    url('pattern.png');
}

伪元素背景

利用伪元素创建复杂背景效果：

.pseudo-bg {
  position: relative;
}
.pseudo-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: -1;
}

视差背景

通过background-attachment实现视差滚动效果：

.parallax {
  background-image: url('mountain.jpg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}