在 tailwindcss 中具有不透明度的背景圖像

Question

我正在嘗試從 vanilla CSS 到 tailwindcss 重新創建一個項目。 但是我嘗試了很多選擇並且失敗了。

這是 CSS 代碼：

header {
    background: linear-gradient(rgba(135, 80, 156, 0.9), rgba(135, 80, 156, 0.9)), url(img/hero-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    position: relative;
}

任何人都可以將此代碼轉換為等效的 tailwindcss 代碼嗎？

Answer 1

您有幾個選擇：

最簡單的一種是在 style 屬性上設置圖像，畢竟這是非常自定義的樣式：

<header
  class="relative bg-fixed bg-center bg-cover bg-no-repeat"
  style="background-image:linear-gradient(rgba(135, 80, 156, 0.9), rgba(135, 80, 156, 0.9)), url(img/hero-bg.jpg)">
  
</header>

第二個選項是繼續使用您的樣式表，但僅限於背景圖像：

header {
  background-image:linear-gradient(rgba(135, 80, 156, 0.9), rgba(135, 80, 156, 0.9)), url(img/hero-bg.jpg)
}



<header class="relative bg-fixed bg-center bg-cover bg-no-repeat">
  
</header>

最后，您可以創建一個插件，您可以在其中動態發送顏色，並將圖像作為參數，tailwind 將為您生成這些類。 這更復雜，但文檔真的很有幫助： https : //tailwindcss.com/docs/plugins#app

如果你問我，我只會選擇第一個選項😃

這是一個工作演示和教程： https : //bleext.com/post/creating-a-hero-header-with-a-fixed-image