背景图像

线性渐变

要给一个元素一个线性的渐变背景，可以使用 bg-gradient-{direction} 功能类，并结合gradient color stop功能类。

响应式

要在特定的断点处控制元素的背景图像，请在任何现有的背景图像功能类中添加 {screen}: 前缀。例如，使用 md:bg-gradient-to-r 来应用 bg-gradient-to-r 功能类，只适用于中等尺寸以上的屏幕。

<div class="bg-gradient-to-l md:bg-gradient-to-r ..."></div>

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

自定义

背景图片

默认情况下，Tailwind 包括背景图片功能类，用于创建八个方向的线性渐变背景。

您可以通过编辑 tailwind.config.js 文件中的 theme.backgroundImage 部分来添加您自己的背景图片。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        backgroundImage: theme => ({
+         'hero-pattern': "url('/img/hero-pattern.svg')",
+         'footer-texture': "url('/img/footer-texture.png')",
        })
      }
    }
  }

这些不只是渐变，它们可以是任何您需要的背景图片。

这些类将采用 bg-{key} 的形式，所以 hero-pattern 将变成 bg-hero-pattern。

变体

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

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

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

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

禁用

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

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