如何使用 Tailwind CSS 新增全屏背景影片？

要使用 Tailwind CSS 新增全屏背景影片，我們將學習各種 Tailwind 類。在網頁中新增全屏背景影片是增強使用者體驗併為網站增添視覺趣味的好方法。

在本文中，我們將瞭解如何使用 Tailwind CSS 將全屏背景影片新增到您的網頁。

新增全屏背景影片的步驟

我們將按照以下步驟使用 Tailwind CSS 新增全屏背景影片。

  • 在 head 部分，我們使用了 link 標籤來載入編譯後的 Tailwind CSS 樣式表。然後，我們使用 **bg-green-400** 設定了 html body 的 背景顏色。
  • 我們使用了帶有 h2 的 div 元素來顯示標題，並使用了以下 Tailwind 類來設定標題樣式。我們使用了 **relative** 來根據容器 定位 文字內容和影片，**flex** 來 顯示 為 flex 容器，**justify-center** 來居中文字，**text-white** 將 文字顏色 更改為白色。
  • 我們在標題上使用了以下類：**text-4xl** 用於更改 字型大小，**font-bold** 用於設定 字型粗細 使文字加粗，**pb-4** 用於設定底部 填充。
  • 我們使用了 video 標籤在我們的 HTML 文件中插入影片，並將其包裝在一個 div 中。我們在 div 上使用了以下類：**h-screen 和 w-screen** 用於佔據螢幕的全部 高度 和 寬度，以及 **overflow-hidden** 用於阻止影片溢位容器。我們使用了諸如 **autoplay**（自動播放影片）、**muted**（靜音影片）和 **loop**（迴圈播放影片）之類的影片屬性。
  • 我們在 video 標籤上使用了以下類以全屏顯示：**h-full 和 w-full** 用於相對於其父元素的影片的 100% 高度和寬度，**object-cover** 使影片覆蓋整個螢幕。

示例

這是一個完整的示例程式碼，實現了上述使用 Tailwind CSS 類新增全屏背景影片的步驟。

<html>
<head>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" 
          rel="stylesheet">
</head>
<body class="bg-green-400">
    <div class="relative  flex  justify-center text-white">
        <h2 class="text-4xl font-bold pb-4">
            Explore our Complete Tailwind CSS Tutorial
        </h2>
    </div> 
    <div class="relative h-screen w-screen overflow-hidden ">
        <video src="/assets/questions/media/1269191-1729842482.mp4"  
               autoplay muted loop 
               class="absolute z-10 inset-0 h-full 
                      w-full object-cover">
        </video>
    </div>
</body>
</html>

結論

在本文中，我們瞭解瞭如何使用 Tailwind CSS 將全屏背景影片新增到您的網頁。我們使用了 Tailwind CSS 框架提供的各種類。

更新於：2024年10月25日

6000+ 次瀏覽

開啟你的 職業生涯

完成課程獲得認證

開始學習
廣告