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

Question

我想对我的背景图片应用线性渐变。在 tailwind 配置文件上，我写了一个自定义规则，如下所示：

 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

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

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.tailwindcss.com/uHp6pKIKEc

Answer 2

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

你必须给 rgba color code 而不是 hex color code

注意：rgba 中的十六进制颜色代码仅受 scss 支持

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

Tailwind CSS: how to apply background image with linear gradient?

css

tailwind-css

tailwind-in-js