CSS 背景图片

Begindev 编辑部 March 25, 2026

背景图像可以显著增强网页的视觉吸引力，将平淡的布局转变为引人入胜的动态体验。

它们可用于建立品牌形象、强调内容，或仅仅是为了增加美感。

本章将深入探讨用于添加、定位和操作背景图像的各种属性和技巧。

1. 添加背景图像

background-image 属性用于向 HTML 元素的背景添加图像。该属性的值通常是指向图像文件的 URL。

1.1 基本实现

添加背景图像最简单的方法是指定图像的 URL：

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

在这个例子中，位于 "images" 文件夹中的 background.jpg 图像将被应用为整个 body 元素的背景。请确保图像路径正确。

1.2 多重背景图像

CSS 允许你为单个元素指定多个背景图像。用逗号分隔每个 URL。图像会层叠在一起，列表中的第一个图像位于最顶层（最靠近观看者）。

.my-element {
  background-image: url("images/overlay.png"), url("images/base.jpg");
}

在这种情况下，overlay.png 将显示在 base.jpg 之上。顺序很重要！你还可以将 background-color 与多重背景图像结合使用；颜色将应用在所有图像的后面。

1.3 指定图像格式

现代 Web 开发支持多种图像格式。最常见的是 JPEG、PNG、GIF 和 SVG。

JPEG: 最适合照片。有损压缩，文件较小。
PNG: 最适合线条清晰的图像、文本和徽标。支持透明度，无损压缩。
GIF: 支持动画，但颜色有限。
SVG: 矢量格式，非常适合图标和插图。可无损缩放。

对于背景图像，当你需要透明度时通常首选 PNG。JPEG 适合摄影背景。

2. 背景重复 (Background Repeat)

默认情况下，背景图像会在水平和垂直方向上重复（平铺）以覆盖整个元素。background-repeat 属性控制此行为。

repeat: (默认) 背景图像在水平和垂直方向上重复。
repeat-x: 背景图像仅在水平方向上重复。
repeat-y: 背景图像仅在垂直方向上重复。
no-repeat: 背景图像不重复，仅显示一次。使用 no-repeat 时，配合 background-position 属性非常重要。

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

.element-repeat-x {
  background-image: url("images/horizontal-pattern.png");
  background-repeat: repeat-x;
}

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

3. 背景位置 (Background Position)

background-position 属性指定背景图像的初始位置。它接受两个值：水平位置和垂直位置。

3.1 关键字

你可以使用关键字来指定位置：

top, bottom, left, right, center。

.element-position-top-left {
  background-image: url("images/logo.png");
  background-repeat: no-repeat;
  background-position: top left;
}

.element-position-center {
  background-image: url("images/logo.png");
  background-repeat: no-repeat;
  background-position: center; /* 水平和垂直居中 */
}

.element-position-bottom-right {
  background-image: url("images/logo.png");
  background-repeat: no-repeat;
  background-position: bottom right;
}

3.2 像素和百分比

你可以使用像素值或百分比。第一个值是水平偏移，第二个是垂直偏移。0 0 是左上角。

.element-position-pixels {
  background-image: url("images/logo.png");
  background-repeat: no-repeat;
  background-position: 20px 30px; /* 距离左侧 20px，距离顶部 30px */
}

.element-position-percentages {
  background-image: url("images/logo.png");
  background-repeat: no-repeat;
  background-position: 50% 50%; /* 居中显示图片 */
}

百分比是相对于元素大小的。50% 50% 始终会使图像居中，无论元素尺寸如何。

4. 背景尺寸 (Background Size)

background-size 属性控制背景图像的大小。这在使用 no-repeat 或希望图像覆盖整个元素时特别有用。

auto: (默认) 显示图像的原始尺寸。
cover: 缩放背景图像以完全覆盖元素背景区域。保持图像纵横比，可能会裁剪掉部分图像。常用于全屏背景。

.element-size-cover {
  background-image: url("images/large-image.jpg");
  background-size: cover; /* 完美覆盖，常用于 Hero Section */
}

contain: 缩放背景图像以完全包含在元素内。保持图像纵横比，图像将完整显示，但如果比例不匹配，可能会留有空白区域。
长度和百分比: 例如 100px 50px 或 50% auto。

.element-size-length {
  background-image: url("images/logo.png");
  background-repeat: no-repeat;
  background-size: 100px 50px; /* 设置width 100px, height 50px */
}

.element-size-percentage {
  background-image: url("images/image.jpg");
  background-size: 50% auto;
}

5. 简写属性 (Shorthand Property)

background 属性是用于一次性设置多个背景属性的简写。值的顺序通常为：

background: color image repeat position / size origin clip attachment;

示例：

.element-shorthand {
  background: #f0f0f0 url("images/pattern.png") repeat top left;
}
.element-shorthand-size {
  /* 注意 size 前面的斜杠 / 是必须的 */
  background: url("images/image.jpg") no-repeat center/cover;
}

6. 实战示例

6.1 全屏背景

创建一个背景图能够覆盖整个屏幕的网页，即使调整浏览器窗口大小也能保持覆盖。关键在于使用 background-size 属性的 cover 值。

<!DOCTYPE html>
<html>
<head>
<title>Full-Page Background</title>
<style>
body {
  background-image: url("images/your-image.jpg"); /* 替换为你的图片 */
  background-size: cover;       /* 关键：覆盖整个区域 */
  background-repeat: no-repeat;
  height: 100vh;                /* 确保背景覆盖整个视口高度 */
  margin: 0;                    /* 移除默认的 body 外边距 */
}
</style>
</head>
<body>
</body>
</html>

6.2 重复纹理

创建一个带有重复纹理背景的元素。使用一张小的无缝纹理图片，并将 background-repeat 属性设为 repeat。

尝试：试着改用 repeat-x (横向重复) 和 repeat-y (纵向重复) 来观察纹理的变化。

<!DOCTYPE html>
<html>
<head>
<title>Repeating Texture</title>
<style>
.texture-container {
  width: 300px;
  height: 200px;
  background-image: url("images/texture.png"); /* 替换为你的纹理图片 */
  background-repeat: repeat;
  border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="texture-container">
</div>
</body>
</html>

6.3 Logo 定位

在 header 元素的右上角添加一个 Logo，且不让其重复。

<!DOCTYPE html>
<html>
<head>
<title>Logo Placement</title>
<style>
header {
  width: 100%;
  height: 100px;
  background-color: #eee;
  background-image: url("images/logo.png"); /* 替换为你的 Logo */
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 80px; /* 按需调整大小 */
}
</style>
</head>
<body>
<header>
</header>
</body>
</html>