背景图像重复

重复

使用 bg-repeat 在垂直和水平方向上重复背景图片。

不重复

当您不想重复背景图片时，使用 bg-no-repeat。

横向重复

使用 bg-repeat-x 只在水平方向重复背景图片。

垂直重复

使用 bg-repeat-y 只在垂直方向重复背景图片。

响应式

要控制元素的背景图像在特定断点处的重复，可以在任何现有的背景重复功能类中添加 {screen}: 前缀。例如，将 md:bg-repeat-x 类添加到一个元素中，就可以在中等大小的屏幕上应用 bg-repeat-x 功能类。

<div class="bg-repeat md:bg-repeat-x ..."></div>

关于 Tailwind 的响应式设计功能的更多信息，请查看响应式设计文档

自定义

变体

默认情况下， 针对 background repeat 功能类，只生成 responsive 变体。

您可以通过修改您的 tailwind.config.js 文件中的 variants 部分中的 backgroundRepeat 属性来控制为 background repeat 功能生成哪些变体。

例如，这个配置也将生成 hover and focus 变体:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       backgroundRepeat: ['hover', 'focus'],
      }
    }
  }

禁用

如果您不打算在您的项目中使用 background repeat 功能，您可以通过在配置文件的 corePlugins 部分将 backgroundRepeat property to false in the corePlugins section of your config file:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     backgroundRepeat: false,
    }
  }