Tailwind CSS：如何应用具有线性渐变的背景图像？

Question

我想对我的背景图像应用线性渐变。在顺风配置文件中，我写了一个这样的自定义规则：

 theme: {
    extend: {
      backgroundImage: (theme) => ({
        'hero-pattern': "url('../src/images/icon-bg.jpg')",
  
      }),
    },
  },

有用。但是当我尝试应用线性渐变时，它不起作用。

为了应用线性梯度，我尝试过的是：

 theme: {
    extend: {
      backgroundImage: (theme) => ({
        
         'hero-pattern':
          "linear-gradient(to right bottom, rgba('#7ed56f',0.8), rgba('#28b485',0.8)), url('../src/images/icon-bg.jpg')",
      }),
    },
  },

但它没有用。

Answer 1

您不必调整配置文件；使用以下类：

bg-[linear-gradient(to_right_bottom,rgba(49,84,44,0.8),rgba(16,71,52,0.8)),url('../src/images/icon-bg.jpg')]

Answer 2

问题是您在 中给出了十六进制颜色代码rgba。这就是不应用颜色的原因。

您必须提供 rgba 颜色代码而不是十六进制颜色代码。

注意：rgba 内的十六进制颜色代码仅受 SCSS 支持。

Answer 3

不要使用函数。只是尝试作为一个实用程序

theme: {
    extend: {
      backgroundImage: {
         'hero-pattern': "linear-gradient(to right bottom, rgba('#7ed56f',0.8), rgba('#28b485',0.8)), url('../src/images/icon-bg.jpg')",
      },
    },
  },

这是一个工作示例https://play.tai​​lwindcss.com/uHp6pKIKEc