CSS 中 background-image 的用法：设置背景图、调整位置与重复方式

background-image 用来为元素绘制一张或多张背景图像。它适合装饰性图案、卡片纹理、按钮图标、渐变色块等不承担主要内容的视觉元素。掌握它时，不能只记住如何写 url()：图片如何缩放、从哪里开始平铺、是否重复、多个背景如何叠加，以及图片加载失败时会发生什么，都需要一并考虑。

本文从基础语法开始，逐步说明路径、背景位置、重复方式和多背景图层，并介绍容易踩到的边界与安全注意事项。示例中的 HTML 和 CSS 可以放进一个普通网页中运行。

一、background-image 的基本语法

最简单的写法是指定一个图片 URL：

.banner {
  background-image: url("images/banner.jpg");
}

也可以直接用渐变作为背景图像：

.banner {
  background-image: linear-gradient(135deg, #243b55, #141e30);
}

渐变是 CSS 图像的一种，不需要请求独立的图片文件。它和普通背景图可以使用相同的定位、尺寸和重复相关属性。

下面是一个完整的最小示例。将 HTML 与 CSS 保存为同一目录下的 index.html，并准备好对应的图片文件，即可运行：

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>背景图示例</title>
  <style>
    .banner {
      min-height: 240px;
      padding: 32px;
      color: white;
      background-image: url("images/banner.jpg");
      background-color: #243b55;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
  </style>
</head>
<body>
  <section class="banner">
    <h1>活动介绍</h1>
    <p>背景图铺满区域，文字仍由 HTML 提供。</p>
  </section>
</body>
</html>

background-image 只指定背景图像，本身不会决定图像怎样缩放或定位。上述示例中的 background-position、background-repeat 和 background-size 分别控制位置、平铺方式和尺寸。

二、图片路径与 url() 的边界

url() 中可以写相对 URL 或绝对 URL。相对路径通常相对于 CSS 样式表文件的位置解析，而不是相对于引用该样式表的 HTML 文件。

/* 假设样式表位于 css/site.css */
.card {
  /* 指向 css/images/pattern.png */
  background-image: url("images/pattern.png");
}

如果 CSS 写在 HTML 的 <style> 元素中，路径则相对于文档 URL 解析。部署到不同目录、使用构建工具改写资源路径时，路径行为可能因此发生变化；遇到本地能显示、上线后找不到图片的情况，应先检查最终生成的 CSS 和浏览器网络请求地址。

url() 也可以使用不带引号的写法，但路径含空格、括号或其他特殊字符时，容易产生解析问题。实际项目中通常使用引号，并对 URL 中需要编码的字符进行正确编码。不要把 HTML 转义和 URL 编码混为一谈：HTML 属性中的转义规则不等同于 CSS 的解析规则。

三、背景尺寸：原始大小、cover 与 contain

默认情况下，背景图像按其固有尺寸绘制，不会自动铺满元素。比如图片为 400×200 CSS 像素，而容器为 300×180 CSS 像素，默认绘制仍以图片的固有尺寸为基准，超出区域的部分会被裁切。

常见的 background-size 值有：

• auto：使用图像固有尺寸；若只指定一个尺寸，另一个方向通常按图像宽高比自动计算。
• cover：保持宽高比缩放，使图像覆盖整个背景定位区域。图像可能被裁切。
• contain：保持宽高比缩放，使整张图像完整落入背景定位区域。区域可能留空。
• 长度或百分比：例如 160px 90px 或 100% auto，分别指定宽度和高度。

cover 和 contain 适合不同场景。横幅、封面区域通常更关心“铺满”，可用 cover，但要接受部分画面被裁切；商品图、徽标等必须完整展示的内容可考虑 contain，并为留白区域指定背景颜色。

.cover-card {
  min-height: 220px;
  background-image: url("images/landscape.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.logo-panel {
  min-height: 120px;
  background-color: #f2f4f7;
  background-image: url("images/logo.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

使用 cover 时，容器尺寸与图片宽高比不同，就必然有一部分图像落在可见区域之外。只调整 background-position 可以改变被裁掉的位置，却不能让整张图同时完整显示。若图片中有必须保留的人脸、文字或产品主体，需检查窄屏和宽屏下的裁切效果；必要时使用不同图片、调整容器比例，或改用 HTML 图片元素。

四、background-position：调整背景图的位置

background-position 可以使用关键字、长度和百分比。常用关键字包括 left、center、right、top、bottom：

.centered {
  background-position: center;
}

.top-right {
  background-position: right top;
}

.offset {
  background-position: 20px 10px;
}

一个关键字表示对应轴的位置；两个关键字可以分别表示水平和垂直位置，顺序通常可读作先水平、后垂直。也可以使用两个长度值：第一个是水平偏移，第二个是垂直偏移。正的长度会让图像相对起始位置向右或向下移动。

百分比定位不是简单地表示“从容器左边量出图像宽度的百分比”。它会对齐图像与定位区域中相同百分比的位置。以水平方向为例，可用以下关系理解：

图像左边缘位置 = (定位区域宽度 - 图像宽度) × 百分比

因此，background-position: 50% 50% 会把图像的中心与定位区域的中心对齐，效果相当于居中。当图像比区域宽时，结果可能是负值，这就是居中后左右两侧被裁切的原因。

例如，主体偏向图片左侧时，可以把背景向左对齐，而不是使用默认居中：

.hero {
  min-height: 260px;
  background-image: url("images/subject-left.jpg");
  background-size: cover;
  background-position: 35% center;
  background-repeat: no-repeat;
}

还可以用“边缘加偏移量”的形式表达位置，例如：

.badge {
  background-position: right 12px bottom 8px;
}

这种写法表达图像距右边和下边的距离，适合定位装饰图案。注意，这里的偏移属于背景定位语法，不能把它理解为普通的元素边距。

五、background-repeat：控制平铺方式

背景图像默认会在水平和垂直方向重复平铺。对于小纹理，这可能正是需要的效果；对照片或横幅而言，通常应明确关闭重复。

• repeat：水平、垂直方向都重复，也是初始行为。
• repeat-x：只沿水平方向重复。
• repeat-y：只沿垂直方向重复。
• no-repeat：不重复。
• space：尽可能重复，并在图像之间分配空白；定位区域容不下多个图像时，可能只显示一个。
• round：重复图像并调整其尺寸，使重复次数能适配定位区域。

.tile {
  background-image: url("images/tile.png");
  background-repeat: repeat;
}

.header-strip {
  background-image: url("images/stripe.png");
  background-repeat: repeat-x;
}

.icon-background {
  background-image: url("images/icon.svg");
  background-repeat: no-repeat;
}

round 与 space 在需要精确控制平铺格数、间距时有用，但它们的效果会受定位区域尺寸影响。若图案尺寸必须固定，通常选择 repeat；若不希望图像意外出现多份，应明确设置 no-repeat。

还可以分别设置水平和垂直方向：

.custom-repeat {
  background-repeat: repeat no-repeat;
}

上例表示水平方向重复、垂直方向不重复。较新的语法还允许使用 repeat、space、round、no-repeat 等值分别控制两个方向。不要把 repeat-x 和 repeat-y 与任意两值写法混为一谈：它们是传统的单值关键字。

六、多个背景图层与叠加顺序

background-image 可以接受逗号分隔的多个图像层。列表中的第一层绘制在最上方，后面的层依次位于其下；背景颜色位于所有背景图像层的下面。

.notice {
  background-image:
    linear-gradient(rgba(12, 20, 35, 0.45), rgba(12, 20, 35, 0.45)),
    url("images/notice.jpg");
  background-position: center, center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-color: #243b55;
}

这里的半透明渐变层位于照片上方，可让文字更容易辨认。对每个背景图层，位置、尺寸和重复方式也可以分别列出；如果某个相关属性提供的值少于图层数，浏览器会按 CSS 规则重复使用该属性列表中的值。因此，为便于维护，图层较多时最好把各层的对应设置写清楚。

背景颜色不是图像层，不能写成与多张图片一一对应的逗号分隔列表。它只绘制在背景图像下方，适合作为图片加载失败时的底色，也能为透明 PNG、SVG 或渐变留出稳定背景。

七、用 background 简写时要留心

background 是多个背景相关属性的简写。例如：

.panel {
  background: #eef2f6 url("images/pattern.png") center / 32px 32px repeat;
}

斜线前的内容可包含位置，斜线后的内容可指定尺寸；颜色、图像和重复方式也可以放在简写中。不过，简写会把未显式写出的背景子属性重置为初始值。后续维护时，添加一条 background 声明可能意外清除之前设置的 background-size、位置或其他背景属性。

多背景层使用简写时，各层之间用逗号分开，背景颜色只能放在最后一层的声明部分。初学或需要局部覆盖时，分开写 background-image、background-size 等属性往往更容易检查，也更不容易因简写重置而出错。

八、背景图并不等同于内容图片

背景图适合装饰，不适合承载需要被用户理解的信息。CSS 背景不会提供与 HTML 图片 alt 文本相同的替代文本，也通常不会进入页面的语义内容结构。若图片包含商品本身、图表数据、说明文字，或用户必须获得的信息，应使用合适的 HTML 内容元素，而不是只设为背景。

背景图也不能像普通图片元素那样通过属性直接声明固有宽高。若元素没有内容、内边距、边框、明确高度或最小高度，元素本身可能没有足够的可见面积，背景自然也就看不到。设置背景图后“图片消失”，应同时检查元素的尺寸、布局和背景绘制区域，而不只是检查图片路径。

在视觉上，背景图覆盖文字时还要检查文本对比度。添加半透明渐变层可以改善可读性，但最终效果需要在不同屏幕尺寸、图片明暗区域和文字状态下验证。背景图片失败时，文字仍应有足够可读性，背景颜色也应合理。

九、常见错误与排查顺序

1. 路径相对于错误的位置。外部 CSS 中的相对路径通常相对于 CSS 文件，而非 HTML 文件。使用浏览器开发者工具检查请求 URL 和网络状态。
2. 元素没有高度。空元素或内容很少的元素高度可能不足。按设计需要设置内容、内边距、min-height 或布局尺寸。
3. 以为背景会自动铺满。默认绘制使用图像固有尺寸。需要覆盖区域时明确写 background-size: cover，并确认裁切是否可接受。
4. 忘记关闭重复。照片、横幅等通常要显式设置 background-repeat: no-repeat，否则默认平铺可能产生意外结果。
5. 误解百分比定位。50% 50% 是图像与区域的对应点对齐，不是单纯把图像左上角放到区域中点。
6. 简写覆盖了单项设置。检查后续的 background 声明是否重置了此前配置。
7. 只在一个视口测试。cover 会根据区域比例裁切，窄屏与宽屏显示的图像区域可能很不一样。
8. 把内容图片当装饰处理。背景没有图片替代文本。重要内容应使用语义合适的 HTML 图片或其他内容表达方式。

十、安全与加载方面的注意事项

background-image: url(...) 会让浏览器尝试获取指定资源，但它不是文件访问权限控制机制，也不会替应用校验 URL 是否可信。不要把未经验证的用户输入直接拼接进 CSS、样式属性或样式表；恶意输入可能造成 CSS 注入、请求意外资源等问题。需要允许用户选择背景时，应从服务端维护的资源标识或经过严格校验的 URL 列表中选择，而不是把任意文本原样写入样式。

图片请求还会受到部署环境和浏览器策略影响。例如，内容安全策略可能通过 img-src 限制可加载的图片来源；HTTPS 页面加载不安全的 HTTP 资源也可能受到浏览器拦截。跨域图片作为 CSS 背景显示时，通常不需要像读取画布像素那样满足同一套 CORS 使用条件；但这不意味着它绕过内容安全策略、混合内容限制或其他网络安全规则。

背景图用于装饰时，按需压缩图片、选择合理格式，并避免为首屏区域加载过大的资源。重要信息不应依赖图片请求成功才能出现。还要注意，CSS 背景不像 HTML 图片元素那样直接提供 alt 文本、loading 属性等内容与加载提示机制；若需要这些能力，应评估是否应使用内容图片，而不是将所有图片都改成背景。

十一、综合示例：响应式封面背景

下面的示例用多背景层叠加暗色渐变，使用 cover 铺满容器，并通过不同屏幕尺寸下的定位值调整主体位置。复制到 HTML 文件中，替换图片路径即可运行。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>响应式背景示例</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: system-ui, sans-serif;
      background: #f2f4f7;
    }

    .hero {
      min-height: 320px;
      display: flex;
      align-items: end;
      padding: 32px;
      color: #fff;
      background-color: #243b55;
      background-image:
        linear-gradient(
          to top,
          rgba(0, 0, 0, 0.72),
          rgba(0, 0, 0, 0.05)
        ),
        url("images/mountain.jpg");
      background-repeat: no-repeat, no-repeat;
      background-position: center, 58% center;
      background-size: cover, cover;
    }

    .hero__content {
      max-width: 42rem;
    }

    .hero h1 {
      margin: 0 0 0.5rem;
      font-size: clamp(2rem, 5vw, 3.5rem);
    }

    .hero p {
      margin: 0;
      line-height: 1.6;
    }

    @media (max-width: 600px) {
      .hero {
        min-height: 280px;
        padding: 24px;
        background-position: center, 62% center;
      }
    }
  </style>
</head>
<body>
  <main>
    <section class="hero">
      <div class="hero__content">
        <h1>走进山野</h1>
        <p>渐变层改善文字对比度，照片作为装饰背景，并随容器尺寸调整。</p>
      </div>
    </section>
  </main>
</body>
</html>

示例中第一层渐变位于第二层照片上方，因此可在照片底部形成更暗的区域。两个图层都设置了尺寸、位置和重复方式，使每项配置与对应图层关系清晰。窄屏规则只调整图片位置和容器高度；它不能消除 cover 的裁切特性，所以仍应使用实际图片检查主体是否被遮掉。

结语

使用 background-image 时，可以先判断图片是不是纯装饰：若承载重要信息，优先使用语义化的内容元素；若只是装饰，再根据需求设置 URL、容器尺寸、background-size、background-position 和 background-repeat。需要叠加照片与渐变时，用多个背景层，并记住列表中的第一层位于最上方。最后检查相对路径、元素高度、响应式裁切、简写重置和资源安全策略，通常就能定位大部分背景图问题。