在网页开发中，设置平铺背景是调整页面视觉效果的常见操作，很多开发者尤其是刚接触前端的新手，会疑惑如何在HTML中实现背景平铺效果。实际上HTML本身没有直接的背景平铺属性，需要结合CSS的background相关属性来完成设置，下面为大家详细介绍具体的实现方法。
核心属性：background-repeat
要实现背景平铺，最核心的CSS属性是background-repeat，它用来控制背景图片的重复方式，常见的取值有以下四种：
- repeat：默认值，背景图片同时在横向和纵向平铺
- repeat-x：背景图片仅在横向平铺
- repeat-y：背景图片仅在纵向平铺
- no-repeat：背景图片不平铺，只显示一次
三种实现方式
1. 行内样式设置
行内样式是直接在HTML元素的style属性中写CSS代码，适合单个元素的简单样式设置，示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>行内样式设置平铺背景</title>
</head>
<body style="background-image: url('bg.jpg'); background-repeat: repeat;">
<h1>这是双向平铺的背景页面</h1>
<p>背景图片会在整个页面横向和纵向重复显示</p>
</body>
</html>2. 内部样式表设置
内部样式表是将CSS代码写在HTML的<style>标签中，适合单个页面的样式统一管理，示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内部样式表设置平铺背景</title>
<style>
/* 横向平铺背景 */
.repeat-x-bg {
background-image: url('bg.jpg');
background-repeat: repeat-x;
height: 200px;
border: 1px solid #ccc;
}
/* 纵向平铺背景 */
.repeat-y-bg {
background-image: url('bg.jpg');
background-repeat: repeat-y;
width: 200px;
height: 400px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="repeat-x-bg">
<p>这个区域的背景仅横向平铺</p>
</div>
<div class="repeat-y-bg">
<p>这个区域的背景仅纵向平铺</p>
</div>
</body>
</html>3. 外部样式表设置
外部样式表是将CSS代码写在独立的.css文件中，通过<link>标签引入，适合多页面共享样式，可维护性更高。
首先是外部CSS文件（style.css）的代码：
/* 不平铺背景样式 */
.no-repeat-bg {
background-image: url('bg.jpg');
background-repeat: no-repeat;
background-position: center center;
height: 300px;
border: 1px solid #ccc;
}然后是HTML文件的代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>外部样式表设置平铺背景</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="no-repeat-bg">
<p>这个区域的背景图片只显示一次，不平铺</p>
</div>
</body>
</html>注意事项
设置背景平铺时，需要注意背景图片的路径要正确，如果路径错误背景将无法显示。另外如果背景图片尺寸较大，平铺时可能会出现显示异常，可以配合background-size属性调整背景图片的尺寸，比如设置background-size: cover让背景图片覆盖整个容器，或者设置background-size: contain让背景图片完整显示在容器内。
HTML背景平铺backgroundbackground-repeatCSS修改时间：2026-05-25 10:42:39