如何使用 .png 图像作为 div 背景？

Question

看看我当前的网页，使用下面的tailwindcss页面开发：

现在我想要实现的是有一个 .PNG 背景而不是中心的空白绿色背景。

我是 Tailwind 的新手，所以我曾经简单地在 css 文件中为特定的 div 类设置一个 background: url(..)。查看 TailwindCSS 文档 here about backround-image，我在那里看不到类似的功能。

以下是我为该特定 div 编写的代码片段：

<!--        Content: background image url should be in this div, right?-->
    <div class="flex-1 pt-2 text-2xl font-bold mt-2 mb-2 bg-green-50 rounded-br-3xl">
        <div>
<!--Search field -->
            <div class="w-full">
                <form class="rounded">
                    <div class="px-5">
                        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Ask me anything (Press CTRL+K to focus)")>
                    </div>
                </form>
            </div>
            <!-- content -->   
            <div class="px-5 pt-8">Course content here</div>
        </div>
    </div>

Answer 1

您可以通过编辑 tailwind.config.js 文件的 theme.backgroundImage 部分来添加自己的背景图片：

// tailwind.config.js

  module.exports = {
    theme: {
      extend: {
        backgroundImage: theme => ({

         'hero-pattern': "url('/img/hero-pattern.svg')",

         'footer-texture': "url('/img/footer-texture.png')",
        })
      }
    }
  }

例如，hero-pattern 将变为 bg-hero-pattern。