如何使用 React 和 Tailwind css 将 svg 图像制作为背景图像？

Question

我正在使用 React 和 Tailwind 实现一个响应式网站，我有一个 SVG 图像，我想将其作为主标签的背景图像，但它不起作用。我遵循顺风文档并将此代码添加到我的 taliwind.config.js

 theme: {
   extend: {
      backgroundImage: {
                         'hero-pattern': "url('/public/background.svg)"
                        }
            }
         }

并且使用 bg-hero-pattern 不显示任何内容。我尝试了另一个选项，它是我标签中的样式属性，它显示图像但它没有覆盖所有父标签，尽管我使用的是 bg-cover 和 bg-no-repeat 这是我的代码：

<main className="w-screen h-screen  ">
    <div className="h-screen w-screen bg-no-repeat bg-cover"                    
         style={{ backgroundImage: `url(${background})` }}>
      {/* Content */}
      
      <div className="px-4 py-6 sm:px-0">
        <div className="border-4 border-dashed border-gray-200 rounded-lg h-96"> 
     </div>
      </div>
      {/* <!-- /End content --> */}
    </div>
  </main>

有人可以帮我吗？

Answer 1

最近我倾向于避免使用背景图片，而是使用 grid。只需将网格单元一层一层地放置即可。

https://play.tailwindcss.com/gOFytBrc4G

<div class="grid h-64 bg-gray-400 p-5">
  <img src="/img/logo.svg" class="col-start-1 row-start-1 self-center opacity-25" alt="Tailwind Play" />
  <div class="col-start-1 row-start-1">
    <h1 class="text-2xl font-bold">This is my heading</h1>
  </div>
</div>

您可以将 img 包裹在 div 中，如果这样可以让您有更多的控制权。

它应该会给出相同的最终结果，而且我发现您可以通过这种方式获得更多控制权。

Answer 2

最简单和最好的解决方案可能是使用任意值。你可以这样做

<div className="bg-[url('../images/background-image.svg')]">

您可以在 here 上找到有关任意值的更多详细信息，并且您需要 tailwind 版本 3+ 才能使用它。

Answer 3

如果您像您提到的那样在 tailwind.config.js 文件中定义了它

theme: {
   extend: {
      backgroundImage:
         {
           'hero_pattern': "url('/public/background.svg)"
         }
     }
 }

您可以简单地将其用作

<div class="bg-hero_pattern">
   ...
   ...
</div>

I have changed name from hero-pattern to hero_pattern

如何使用 React 和 Tailwind css 将 svg 图像制作为背景图像？

How to make an svg image as a background image with react and Tailwind css?

reactjs

svg

responsive-design

background-image

tailwind-css