当前位置：首页 > CSS

css背景制作

2026-02-12 20:47:07CSS

CSS背景制作方法

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

body {
  background-color: #f0f0f0; /* 浅灰色 */
}
div {
  background-color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
}

渐变背景 线性渐变通过linear-gradient()函数实现，径向渐变使用radial-gradient()：

.header {
  background: linear-gradient(45deg, #ff9a9e, #fad0c4);
}
.card {
  background: radial-gradient(circle, #a1c4fd, #c2e9fb);
}

图片背景 background-image属性可添加本地或网络图片，配合其他属性控制显示效果：

css背景制作

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

多背景图层 通过逗号分隔实现多层背景叠加，先定义的图层显示在上方：

.hero-section {
  background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("hero-image.jpg") center/cover;
}

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

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, #23a6d5);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}

背景混合模式 使用background-blend-mode实现特殊混合效果：

.blend-example {
  background-image: url("texture.png"), linear-gradient(red, yellow);
  background-blend-mode: multiply;
}

视差滚动效果 通过不同速率的背景移动创建深度感：

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