我正在使用 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>
誰能幫幫我？
uj5u.com熱心網友回復：
這些天我傾向于避免使用背景影像，grid而是使用。只需將網格單元一層一層疊加。
https://play.tai??lwindcss.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在 a中。div
它應該給出相同的最終結果，而且我發現無論如何你都有更多的控制權。
uj5u.com熱心網友回復：
最簡單和最好的解決方案可能是使用任意值。你可以做這樣的事情
<div className="bg-[url('../images/background-image.svg')]">
您可以在此處找到有關任意值的更多詳細資訊，并且您需要 tailwind 版本 3 才能使用它。
uj5u.com熱心網友回復：
如果您tailwind.config.js像您提到的那樣在檔案中定義了它
theme: {
extend: {
backgroundImage:
{
'hero_pattern': "url('/public/background.svg)"
}
}
}
您可以簡單地將其用作
<div class="bg-hero_pattern">
...
...
</div>
我已將名稱從 hero-pattern 更改為 hero_pattern
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/476960.html
上一篇：漸變影片上的svg蒙版