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

Question

看看我目前的网页，是用下面的tailwindcss页面开发的：

​

​

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

我是Tailwind的新手，所以我习惯于在css文件中为特定的background: url(..)类设置一个div。查看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。