使用 CSS background-repeat 属性

要控制背景图片的平铺方式,最核心、最常用的 CSS 属性就是 background-repeat，你可以将它应用在任何一个需要设置背景的 HTML 元素上，<body>、<div> 等。

web网页背景图片怎么平铺
（图片来源网络，侵删）

background-repeat 属性有几个关键的值：

属性值 效果描述 示意图
repeat (默认值) 在水平和垂直方向上都重复平铺，直到填满整个元素。
repeat-x 只在水平方向（X轴）上重复平铺。
repeat-y 只在垂直方向（Y轴）上重复平铺。
no-repeat 不平铺，图片只显示一次。

如何使用：代码示例

下面我们通过几个具体的例子来学习如何使用这些属性。

示例 1：给整个网页（<body>）添加平铺背景

这是最常见的需求,比如给网页添加一个纹理或图案背景。

HTML 代码: 你只需要一个空的 <body> 标签，样式都写在 CSS 中。

web网页背景图片怎么平铺
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">背景平铺示例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个演示背景图片如何平铺的示例。</p>
</body>
</html>

CSS 代码 (style.css):

/* 假设你的背景图片名为 'texture.jpg'，放在 images 文件夹下 */
body {
    /* 1. 设置背景图片 */
    background-image: url('images/texture.jpg');
    /* 2. 设置平铺方式 - 默认就是 repeat，但写上更清晰 */
    background-repeat: repeat;
    /* 为了让内容可读，通常会设置一个背景色作为备用 */
    background-color: #f0f0f0;
    /* 让内容居中显示，方便观察背景 */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: sans-serif;
}

效果： texture.jpg 这张图片会像瓷砖一样，在浏览器窗口的整个区域重复铺满。

示例 2：只在水平方向平铺

如果你想要一条水平分割线或者一个横向的装饰带,这个就很有用。

CSS 代码: 只需修改 background-repeat 的值。

web网页背景图片怎么平铺
（图片来源网络，侵删）
body {
    background-image: url('images/horizontal-line.png');
    background-repeat: repeat-x; /* 只在水平方向重复 */
    background-color: #f0f0f0;
    /* 其他样式... */
}

效果： 图片会从左到右无限重复，但只在顶部出现一条。

示例 3：只在垂直方向平铺

这个用得相对较少,但有时可以用于创建侧边栏的装饰效果。

CSS 代码:

body {
    background-image: url('images/vertical-pattern.png');
    background-repeat: repeat-y; /* 只在垂直方向重复 */
    background-color: #f0f0f0;
    /* 其他样式... */
}

效果： 图片会从上到下无限重复，紧贴在左侧。

高级技巧与最佳实践

掌握了基础后,还有一些相关的属性能让你的背景效果更完美。

控制图片位置 (background-position)

当你使用 no-repeat 时，background-position 就非常有用了，它可以决定图片在元素中的起始位置。

CSS 代码:

body {
    background-image: url('images/logo.png');
    background-repeat: no-repeat; /* 不平铺 */
    background-position: center center; /* 图片居中显示 */
    background-color: #f0f0f0;
    /* ... */
}

background-position 的值可以是：

  • 关键词：top, bottom, left, right, center
  • 长度值：px, , em 等。background-position: 20px 30px; 表示图片的左上角距离元素的左边20px，上边30px。

固定背景 (background-attachment)

这个属性可以控制背景图片是随页面滚动而滚动,还是固定在视口中。

  • scroll (默认): 背景图片会随页面内容一起滚动。
  • fixed: 背景图片固定在视口（浏览器窗口）中，不随页面滚动，这种效果常用于创建视差滚动（Parallax Scrolling）。

CSS 代码:

body {
    background-image: url('images/large-bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed; /* 背景固定 */
    background-size: cover; /* 结合使用效果更佳 */
}

现代方式：background-size (非常重要！)

这个属性可以控制背景图片的大小,极大地扩展了背景图片的使用场景。

  • auto (默认): 图片保持原始尺寸。
  • cover: 图片会自动缩放，以覆盖整个元素，可能会被裁剪。
  • contain: 图片会自动缩放，以容纳整个元素，可能会留有空白。

结合 background-repeat: no-repeat 使用 cover 或 contain 是现代网页设计的常用技巧，可以避免图片重复，同时又能很好地适应不同屏幕尺寸。

示例：使用 cover 创建全屏背景

body {
    /* 假设这是一张高分辨率的风景图 */
    background-image: url('images/hero-image.jpg');
    /* 关键组合：不平铺，覆盖整个区域，固定位置 */
    background-repeat: no-repeat;
    background-size: cover; 
    background-position: center center;
    background-attachment: fixed;
    height: 100vh; /* 让body高度和视口一样高 */
}

总结与最佳实践

你的目标 推荐的 CSS 组合
简单的纹理/图案背景 background-image: url(...);
background-repeat: repeat;
一条水平装饰线 background-image: url(...);
background-repeat: repeat-x;
一个居中的 Logo background-image: url(...);
background-repeat: no-repeat;
background-position: center center;
全屏、不重复、自适应的背景图 background-image: url(...);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed; (可选)

最后的小提示： 为了确保网页在图片加载失败时依然有良好的用户体验，总是设置一个 background-color 作为备用，这个颜色应该与你背景图片的主色调相近。

body {
    background-image: url('images/texture.jpg');
    background-color: #e9e9e9; /* 备用背景色 */
    /* ... */
}