background-repeat 背景重复

学习

background-repeat 背景重复

2026-02-23/0/ 编辑

background-repeat 背景重复

概念

background-repeat 属性用于设置背景图片的重复方式，控制背景图片如何在元素中平铺。

语法

background-repeat: 值;

属性值

值说明示例
repeat默认值，水平和垂直都重复网页平铺背景
repeat-x水平方向重复顶部装饰条
repeat-y垂直方向重复侧边装饰
no-repeat不重复，只显示一次单张背景图
space图片之间留有空隙（CSS3）特殊装饰效果
round图片自动缩放以完整填充（CSS3）平铺装饰

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-repeat 示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        .box {
            width: 200px;
            height: 200px;
            border: 2px solid red;
            background-image: url(./images/bg.png);
            float: left;
            margin: 20px;
            padding: 10px;
            text-align: center;
        }

        .box1 {
            /* 不平铺 */
            background-repeat: no-repeat;
        }

        .box2 {
            /* y轴平铺 */
            background-repeat: repeat-y;
        }

        .box3 {
            /* x轴平铺 */
            background-repeat: repeat-x;
        }

        .box4 {
            /* x 和 y 轴都平铺（默认） */
            background-repeat: repeat;
        }

        .container::after {
            content: "";
            display: block;
            clear: both;
        }

        h3 {
            color: #333;
        }

        .label {
            font-size: 14px;
            color: #666;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h1>background-repeat 背景重复演示</h1>

    <div class="container">
        <div class="box box1">
            <h3>no-repeat</h3>
            <div class="label">不平铺，只显示一次</div>
        </div>

        <div class="box box2">
            <h3>repeat-y</h3>
            <div class="label">垂直方向重复</div>
        </div>

        <div class="box box3">
            <h3>repeat-x</h3>
            <div class="label">水平方向重复</div>
        </div>

        <div class="box box4">
            <h3>repeat</h3>
            <div class="label">水平和垂直都重复</div>
        </div>
    </div>
</body>
</html>

详细说明

1. repeat（默认值）

背景图片在水平和垂直方向都重复平铺。

background-repeat: repeat;

使用场景：

  • 网站背景纹理
  • 装饰性图案

2. repeat-x

背景图片只在水平方向重复。

background-repeat: repeat-x;

使用场景：

  • 顶部装饰条
  • 分割线
  • 页眉背景

3. repeat-y

背景图片只在垂直方向重复。

background-repeat: repeat-y;

使用场景：

  • 侧边装饰
  • 分栏背景
  • 列表装饰

4. no-repeat

背景图片不重复，只显示一次。

background-repeat: no-repeat;

使用场景：

  • Logo
  • 单张背景图
  • 装饰图片

5. space（CSS3）

背景图片重复，但图片之间会自动调整间距，确保图片完整显示。

background-repeat: space;

特点：

  • 图片不会被裁剪
  • 图片之间保持均匀间距
  • 只在水平和垂直方向都重复时使用

6. round（CSS3）

背景图片自动缩放以完整填充元素区域。

background-repeat: round;

特点：

  • 图片自动缩放
  • 确保完整填充
  • 不会出现被裁剪的图片

分别设置水平和垂直重复

从 CSS3 开始，可以分别设置水平和垂直方向的重复方式：

/* 语法 */
background-repeat: 水平重复 垂直重复;

/* 示例 */
background-repeat: repeat no-repeat;  /* 水平重复，垂直不重复 */
background-repeat: no-repeat repeat;  /* 水平不重复，垂直重复 */
background-repeat: no-repeat no-repeat;  /* 都不重复 */
background-repeat: repeat-x;  /* 等同于 repeat no-repeat */

实际应用场景

场景 1：网站纹理背景

body {
    background-color: #f5f5f5;
    background-image: url(pattern.png);
    background-repeat: repeat;
}

场景 2：顶部装饰条

.header {
    height: 100px;
    background-image: url(decor.png);
    background-repeat: repeat-x;
    background-position: top left;
}

场景 3：侧边栏装饰

.sidebar {
    background-image: url(side-decor.png);
    background-repeat: repeat-y;
    background-position: left top;
}

场景 4：单张背景图

.hero {
    width: 100%;
    height: 500px;
    background-image: url(hero-image.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

场景 5：按钮图标

.button {
    padding-left: 30px;
    background-image: url(icon.png);
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 16px;
}

与其他属性配合

与 background-position 配合

.card {
    background-image: url(bg.png);
    background-repeat: no-repeat;
    background-position: center center;
}

与 background-size 配合

.cover {
    background-image: url(large-image.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

与简写属性配合

/* 完整简写 */
background: url(bg.png) no-repeat center center / cover;

/* 水平重复示例 */
background: url(decor.png) repeat-x top;

浏览器兼容性

属性值ChromeFirefoxSafariIE/Edge
repeat✅ 1.0+✅ 1.0+✅ 1.0+✅ 4.0+
repeat-x/y✅ 1.0+✅ 1.0+✅ 1.0+✅ 4.0+
no-repeat✅ 1.0+✅ 1.0+✅ 1.0+✅ 4.0+
space✅ 25.0+✅ 49.0+✅ 7.0+❌
round✅ 25.0+✅ 49.0+✅ 7.0+❌

注意事项

  1. 默认值：background-repeat 的默认值是 repeat
  2. 性能考虑：大面积重复背景可能影响性能，建议使用 CSS 渐变代替
  3. 响应式：在小屏幕上，重复背景可能显示不佳
  4. 图片优化：背景图片应该优化压缩，减小文件大小

常见问题

Q1: 为什么背景图片不平铺？

A: 检查是否设置了 background-repeat: no-repeat 或图片尺寸大于容器

Q2: 如何让背景图片居中且不重复？

.background {
    background-image: url(bg.png);
    background-repeat: no-repeat;
    background-position: center center;
}

Q3: 如何创建只有水平方向的装饰背景？

.decoration {
    background-image: url(pattern.png);
    background-repeat: repeat-x;
    height: 50px;
}

最佳实践

/* ✅ 推荐：单张背景图 */
.hero-section {
    background: url(hero.jpg) no-repeat center center / cover;
}

/* ✅ 推荐：纹理背景 */
body {
    background: url(pattern.png) repeat;
    background-color: #f5f5f5; /* 回退颜色 */
}

/* ✅ 推荐：装饰条 */
.top-bar {
    background: url(decor.png) repeat-x top;
    height: 10px;
}

/* ✅ 推荐：图标背景 */
.icon-btn {
    background: url(icon.png) no-repeat 10px center;
    padding-left: 40px;
}

学习笔记：background-repeat 控制背景图片的重复方式，是创建各种背景效果的重要属性。

猜你喜欢