Tailwind CSS - 背景重复

Tailwind 的背景重复实用工具类控制背景图片在元素内平铺的方式。这对于创建图案、纹理或仅仅控制单个背景图片的显示方式至关重要。

背景重复实用工具类

这些类直接对应于 CSS background-repeat 属性，让你完全控制平铺行为。

类名	CSS 属性
`bg-repeat`	`background-repeat: repeat;`
`bg-no-repeat`	`background-repeat: no-repeat;`
`bg-repeat-x`	`background-repeat: repeat-x;`
`bg-repeat-y`	`background-repeat: repeat-y;`
`bg-repeat-round`	`background-repeat: round;`
`bg-repeat-space`	`background-repeat: space;`

重复实用工具类的视觉比较

下面的示例使用一张小的、图案化的图片，清晰地演示了每个背景重复实用工具类的效果。网格布局便于进行并排比较。

请特别注意 bg-repeat-round（它会拉伸图片以适应）和 bg-repeat-space（它会在图片之间添加空间以适应）之间的区别。

示例：重复变体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Repeat Comparison</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* 对于此演示，最好使用一张小的重复图案图片 */
        .pattern-bg {
            background-image: url('https://www.transparenttextures.com/patterns/cubes.png');
        }
    </style>
</head>
<body class="bg-gray-100 p-8">

    <div class="container mx-auto">
        <h1 class="text-3xl font-bold text-center mb-8">Background Repeat Utilities</h1>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

            <!-- bg-repeat -->
            <div>
                <h3 class="font-semibold mb-2 text-center">`bg-repeat`</h3>
                <div class="h-48 border-2 border-gray-300 pattern-bg bg-repeat"></div>
            </div>

            <!-- bg-no-repeat -->
            <div>
                <h3 class="font-semibold mb-2 text-center">`bg-no-repeat`</h3>
                <div class="h-48 border-2 border-gray-300 pattern-bg bg-no-repeat bg-center"></div>
            </div>

            <!-- bg-repeat-x -->
            <div>
                <h3 class="font-semibold mb-2 text-center">`bg-repeat-x`</h3>
                <div class="h-48 border-2 border-gray-300 pattern-bg bg-repeat-x bg-center"></div>
            </div>

            <!-- bg-repeat-y -->
            <div>
                <h3 class="font-semibold mb-2 text-center">`bg-repeat-y`</h3>
                <div class="h-48 border-2 border-gray-300 pattern-bg bg-repeat-y bg-center"></div>
            </div>

            <!-- bg-repeat-round -->
            <div>
                <h3 class="font-semibold mb-2 text-center">`bg-repeat-round`</h3>
                <div class="h-48 border-2 border-gray-300 pattern-bg bg-repeat-round"></div>
            </div>

            <!-- bg-repeat-space -->
            <div>
                <h3 class="font-semibold mb-2 text-center">`bg-repeat-space`</h3>
                <div class="h-48 border-2 border-gray-300 pattern-bg bg-repeat-space"></div>
            </div>

        </div>
    </div>

</body>
</html>

最佳实践与用例

无缝图案： 对于 bg-repeat，使用无缝纹理或图案以获得最佳效果。这些图片设计为完美平铺而没有可见边缘。
结合实用工具类： 将重复实用工具类与背景位置实用工具类（bg-center、bg-top 等）和背景尺寸实用工具类（bg-cover、bg-contain）结合使用，以精确控制你的背景图片。
任意值： 如果你需要直接在 HTML 中设置背景图片（如示例所示），Tailwind 的任意值语法（bg-[url('...')]）非常强大。
性能： 使用小型、可重复的图案图片比使用单个大型背景图片性能更好，因为下载的文件大小更小。