Tailwind CSS 背景图像

背景图像

用于控制元素背景图片的功能类。

线性渐变

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

<div class="bg-gradient-to-r from-yellow-400 via-red-500 to-pink-500 ..."></div>

响应式

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

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