css3制作背景

使用CSS3制作背景的方法

纯色背景

通过background-color属性设置纯色背景，颜色值可以是十六进制、RGB或颜色名称：

body {
  background-color: #f0f0f0;
}

渐变背景

CSS3支持线性渐变和径向渐变，通过background-image实现：

/* 线性渐变 */
.linear-gradient {
  background-image: linear-gradient(to right, #ff9966, #ff5e62);
}

/* 径向渐变 */
.radial-gradient {
  background-image: radial-gradient(circle, #3a7bd5, #00d2ff);
}

图片背景

使用background-image添加背景图片，配合其他属性控制显示效果：

.bg-image {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

多背景叠加

CSS3允许同时设置多个背景层，用逗号分隔：

.multi-bg {
  background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url('image.jpg') center/cover no-repeat;
}

动态背景效果

结合动画属性创建动态背景：

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

.animated-bg {
  background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}

背景滤镜效果

通过backdrop-filter或filter属性添加特殊效果：

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

.hue-bg {
  filter: hue-rotate(90deg);
}