CSS基础教程（十）background（背景）：CSS背景，不只是“背景板”的逆袭之路！

原创于 2025-09-10 09:18:27 发布 · 508 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #tensorflow #前端

CSS基础教程专栏收录该内容

57 篇文章

订阅专栏

该文章已生成可运行项目，

你以为CSS背景只是简单的颜色和图片？Too young, too simple！这篇干货满满的指南将带你探索CSS背景的奇幻世界，从单调到炫酷，只需5分钟！

一、背景基础：不只是“背景板”

还记得1990年代的网页吗？灰蒙蒙的背景上闪烁着“欢迎来到我的主页！”的彩虹文字？那时候的CSS背景（如果算得上的话）顶多就是个bgcolor="#cccccc"。

时过境迁，CSS背景已经从那个单纯的“背景板”进化成了网页设计的超级英雄！它不再只是内容的陪衬，而是成为了表达品牌、引导视线、创造沉浸式体验的关键工具。

1.1 背景属性全家福

CSS背景模块提供了一系列属性，让我们一起来认识一下这个“背景家族”的成员们：

background-color：设置背景颜色
background-image：设置背景图片
background-position：设置背景图片的位置
background-size：设置背景图片的尺寸
background-repeat：设置背景图片的重复方式
background-attachment：设置背景图片是否固定
background-origin：设置背景图片的定位区域
background-clip：设置背景的绘制区域
background-blend-mode：设置背景混合模式

当然，我们还有 shorthand 属性 background，可以一次性设置所有背景属性。

/* 分开设置 */
.element {
  background-color: #f0f0f0;
  background-image: url("image.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 使用简写 */
.element {
  background: #f0f0f0 url("image.jpg") center center / cover no-repeat;
}

1.2 背景颜色的魔力

别看background-color简单，它可是有很多技巧的：

.hero-section {
  /* 基础颜色 */
  background-color: #3498db;
  
  /* 半透明颜色 */
  background-color: rgba(52, 152, 219, 0.8);
  
  /* HSLA颜色 - 更直观的色调控制 */
  background-color: hsla(204, 70%, 53%, 0.8);
  
  /* 回退机制 */
  background-color: #3498db;
  background-color: rgba(52, 152, 219, 0.8); /* 支持RGBA的浏览器会覆盖 */
}

二、背景图片进阶技巧

2.1 响应式背景图片

在移动设备普及的今天，响应式设计不再是可选项，而是必选项。背景图片也需要适应不同屏幕尺寸。

.responsive-bg {
  background-image: url("small.jpg");
  background-size: cover;
  background-position: center;
  
  /* 媒体查询为不同屏幕尺寸提供优化后的图片 */
  @media (min-width: 768px) {
    background-image: url("medium.jpg");
  }
  
  @media (min-width: 1200px) {
    background-image: url("large.jpg");
  }
}

2.2 高性能背景图片策略

大背景图片可能是性能杀手，下面是一些优化技巧：

.optimized-bg {
  /* 使用WebP格式（如果浏览器支持） */
  background-image: url("image.jpg");
  background-image: image-set(
    "image.webp" type("image/webp"),
    "image.jpg" type("image/jpeg")
  );
  
  /* 使用渐进式JPEG */
  /* 渐进式JPEG会先显示模糊版本然后逐渐清晰 */
  
  /* 懒加载背景图片 */
  /* 可以使用Intersection Observer API实现 */
}

三、CSS渐变：从平淡到惊艳

CSS渐变是背景设计中的游戏规则改变者。它们不需要额外的HTTP请求，可以通过代码创建复杂的背景效果。

3.1 线性渐变

.linear-gradient {
  /* 基础线性渐变 */
  background: linear-gradient(to right, #ff9a9e, #fad0c4);
  
  /* 多色渐变 */
  background: linear-gradient(to right, #ff9a9e, #fad0c4, #a18cd1);
  
  /* 角度渐变 */
  background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 100%);
  
  /* 条纹效果 */
  background: linear-gradient(90deg, 
    #ff9a9e 0%, #ff9a9e 25%, 
    #fad0c4 25%, #fad0c4 50%, 
    #a18cd1 50%, #a18cd1 75%, 
    #fbc2eb 75%, #fbc2eb 100%);
}

3.2 径向渐变

.radial-gradient {
  /* 基础径向渐变 */
  background: radial-gradient(circle, #ff9a9e, #fad0c4);
  
  /* 椭圆渐变 */
  background: radial-gradient(ellipse at center, #ff9a9e, #fad0c4);
  
  /* 定位渐变中心 */
  background: radial-gradient(circle at top left, #ff9a9e, #fad0c4);
  
  /* 重复径向渐变 */
  background: repeating-radial-gradient(
    circle at center,
    #ff9a9e,
    #fad0c4 10px
  );
}

3.3 锥形渐变

.conic-gradient {
  /* 基础锥形渐变 */
  background: conic-gradient(#ff9a9e, #fad0c4, #a18cd1, #fbc2eb, #ff9a9e);
  
  /* 颜色轮盘 */
  background: conic-gradient(
    red, yellow, lime, aqua, blue, magenta, red
  );
  
  /* 饼图效果 */
  background: conic-gradient(
    #ff9a9e 0% 25%, 
    #fad0c4 25% 50%, 
    #a18cd1 50% 75%, 
    #fbc2eb 75% 100%
  );
}

四、高级背景技巧

4.1 多重背景

CSS允许元素有多个背景层， opens up a whole new world of possibilities!

.multiple-backgrounds {
  background: 
    /* 第一层：渐变 */
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    /* 第二层：图片 */
    url("background-image.jpg") center/cover,
    /* 第三层：纯色（回退） */
    #3498db;
  
  /* 注意：先列出的层在上面，后列出的在下面 */
}

4.2 背景混合模式

背景混合模式允许背景层以各种方式混合，创建出令人惊叹的效果。

.blend-modes {
  background: 
    url("texture.png"),
    linear-gradient(45deg, #ff9a9e, #fad0c4);
  
  background-blend-mode: overlay;
  
  /* 常用混合模式：
     - multiply: 正片叠底
     - screen: 滤色
     - overlay: 叠加
     - darken: 变暗
     - lighten: 变亮
     - color-dodge: 颜色减淡
     - color-burn: 颜色加深
     - hard-light: 强光
     - soft-light: 柔光
     - difference: 差值
     - exclusion: 排除
     - hue: 色相
     - saturation: 饱和度
     - color: 颜色
     - luminosity: 亮度
  */
}

4.3 背景与伪元素结合

使用伪元素可以创建更复杂的背景效果，而不会污染HTML结构。

.pseudo-element-bg {
  position: relative;
  z-index: 1;
}

.pseudo-element-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ff9a9e, #fad0c4);
  opacity: 0.8;
  z-index: -1;
  
  /* 添加其他效果 */
  filter: blur(5px);
}

五、实战示例：创建炫酷背景效果

5.1 动态渐变背景

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

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

5.2 颗粒质感背景

.noise-texture {
  background-color: #3498db;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  background-blend-mode: overlay;
  opacity: 0.9;
}

5.3 视差滚动效果

<div class="parallax-container">
  <div class="parallax-background"></div>
  <div class="content">
    <h1>视差滚动效果</h1>
    <p>背景移动速度比内容慢，创造深度感</p>
  </div>
</div>

.parallax-container {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;
  position: relative;
}

.parallax-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("background.jpg");
  background-size: cover;
  transform: translateZ(-1px) scale(2);
  z-index: -1;
}

.content {
  position: relative;
  transform: translateZ(0);
}

六、性能优化与最佳实践

6.1 背景性能优化

图片格式选择：

- 使用WebP格式（比JPEG和PNG更高效）
- 考虑使用AVIF格式（下一代图像格式）
- 使用SVG代替简单图案的位图

响应式图像：

- 使用srcset和sizes属性（对于<img>元素）
- 使用媒体查询提供不同尺寸的背景图片

延迟加载：

- 使用懒加载技术，只有当背景进入视口时才加载

6.2 可访问性考虑

颜色对比度：确保背景和前景文字之间有足够的对比度
备用方案：为CSS渐变提供备用背景颜色
减少运动：为对运动敏感的用户提供减少动画的选项

/* 减少运动媒体查询 */
@media (prefers-reduced-motion: reduce) {
  .dynamic-gradient {
    animation: none;
    background: #3498db; /* 静态回退 */
  }
}

七、完整示例：企业网站英雄区域

下面是一个完整的企业网站英雄区域背景示例，结合了多种技巧：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>企业网站示例</title>
  <style>
    .hero {
      position: relative;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-align: center;
      overflow: hidden;
    }
    
    .hero::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: 
        /* 深色覆盖层增加文字可读性 */
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        /* 主背景图片 */
        url("https://images.unsplash.com/photo-1497215728101-856f4ea42174?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80") center/cover;
      z-index: -1;
    }
    
    .hero::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100px;
      background: linear-gradient(to top, rgba(255, 255, 255, 1), transparent);
      z-index: 0;
    }
    
    .hero-content {
      position: relative;
      z-index: 1;
      max-width: 800px;
      padding: 2rem;
    }
    
    .hero h1 {
      font-size: 3.5rem;
      margin-bottom: 1rem;
    }
    
    .hero p {
      font-size: 1.5rem;
      margin-bottom: 2rem;
    }
    
    @media (max-width: 768px) {
      .hero h1 {
        font-size: 2.5rem;
      }
      
      .hero p {
        font-size: 1.2rem;
      }
    }
  </style>
</head>
<body>
  <section class="hero">
    <div class="hero-content">
      <h1>欢迎来到我们的企业</h1>
      <p>我们提供创新的解决方案，帮助您的业务增长</p>
      <button>了解更多</button>
    </div>
  </section>
</body>
</html>