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

【问题标题】：How do I use a .png image as div backround?如何使用 .png 图像作为 div 背景？
【发布时间】：2021-08-18 05:06:09
【问题描述】：

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

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

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

下面是我针对特定 div 的代码的 sn-p：

<!--        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>

【问题讨论】：

标签： tailwind-css

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

【讨论】：

【解决方案2】：

现在 Tailwind 3 已经发布，您可以像这样使用一次性背景图片，而无需使用内联样式或扩展 Tailwind：

<div class="bg-[url('/img/background.png')]">
  <!-- ... -->
</div>

您可以在 docs 中了解有关在 Tailwind 3 中使用任意值的更多信息。

【讨论】：