如何在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')",
      }),
    },
  },

但是它没有起作用。

- Ashik

---

根据文档，您只需要将背景图像添加到配置文件中即可。您可以直接在元素中使用“linear-gradient”类。https://tailwindcss.com/docs/background-image#background-images - miraj

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

- miraj

---

有没有使用实用类来完成这个操作的方法？不能使用“background”简写语法似乎是一个缺点。 - ha404

Answer 2

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

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

- Tsutomu

Answer 3

问题在于你在rgba中使用了十六进制颜色代码，这就是为什么颜色没有被应用的原因。

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

注意：只有SCSS支持在RGBA内部使用十六进制颜色代码。

- Ashik