Tailwind CSS on GitHub

背景图像重复

用于控制元素背景图像重复的功能类。

Default class reference

Class
Properties
bg-repeatbackground-repeat: repeat;
bg-no-repeatbackground-repeat: no-repeat;
bg-repeat-xbackground-repeat: repeat-x;
bg-repeat-ybackground-repeat: repeat-y;
bg-repeat-roundbackground-repeat: round;
bg-repeat-spacebackground-repeat: space;

重复

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

<div class="bg-repeat ..." style="background-image: url(...)"></div>

不重复

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

<div class="bg-no-repeat bg-center ..." style="background-image: url(...)"></div>

横向重复

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

<div class="bg-repeat-x bg-center ..." style="background-image: url(...)"></div>

垂直重复

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

<div class="bg-repeat-y bg-center ..." style="background-image: url(...)"></div>

响应式

要控制元素的背景图像在特定断点处的重复,可以在任何现有的背景重复功能类中添加 {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 属性设置为 false 来完全禁用它们:

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