tailwindCss: как применить фоновое изображение с линейным градиентом?

Question

Я хочу применить к фоновому изображению линейный градиент. в файле конфигурации попутного ветра я написал собственное правило, подобное этому:

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

Оно работает. но когда я пытаюсь применить линейный градиент, он не работает.

Для применения linear-gradient я пробовал следующее:

       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

Вам не нужно настраивать файл конфигурации; Используйте следующий класс:

      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 3

Проблема в том, что вы указываете шестнадцатеричный цветовой код внутри rgba поэтому цвет не применяется.

Ты должен дать rgba color code вместо hex color code

примечание: шестнадцатеричный цветовой код внутри rgba поддерживается только scss