Tailwind CSS on GitHub

背景图像

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

Default class reference

Class
Properties
bg-nonebackground-image: none;
bg-gradient-to-tbackground-image: linear-gradient(to top, var(--tw-gradient-stops));
bg-gradient-to-trbackground-image: linear-gradient(to top right, var(--tw-gradient-stops));
bg-gradient-to-rbackground-image: linear-gradient(to right, var(--tw-gradient-stops));
bg-gradient-to-brbackground-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
bg-gradient-to-bbackground-image: linear-gradient(to bottom, var(--tw-gradient-stops));
bg-gradient-to-blbackground-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
bg-gradient-to-lbackground-image: linear-gradient(to left, var(--tw-gradient-stops));
bg-gradient-to-tlbackground-image: linear-gradient(to top left, var(--tw-gradient-stops));

线性渐变

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

<div class="bg-gradient-to-r from-orange-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: 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 属性设置为 false 来完全禁用它们:

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