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

【问题标题】：Tailwind CSS: how to apply background image with linear gradient?Tailwind CSS：如何应用具有线性渐变的背景图像？
【发布时间】：2021-07-24 10:07:26
【问题描述】：

我想对我的背景图像应用线性渐变。在 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')",
      }),
    },
  },

但是没有用。

【问题讨论】：

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

标签： css tailwind-css tailwind-in-js

【解决方案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

【讨论】：

【解决方案2】：

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

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

注意：只有 scss 支持 rgba 内的十六进制颜色代码

【讨论】：