Tailwind CSS 背景图像重复

背景图像重复

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

重复

使用 ​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,
    }
  }