如何使用Tailwind CSS添加全螢幕背景影片？-html教學-PHP中文網

如何使用Tailwind CSS添加全螢幕背景影片？

PHPz

發布： 2023-09-06 21:17:02

轉載

1238 人瀏覽過

如何使用Tailwind CSS添加全屏背景视频？

簡介

在本文中，我們將向您展示如何使用 Tailwind CSS 將全螢幕背景影片新增到您的網頁。 Tailwind CSS 是一個實用程式優先的 CSS 框架，可以輕鬆創建響應式且一致的設計。它提供了一組 CSS 類，您可以使用它們快速為 HTML 元素添加樣式。

將全螢幕背景影片添加到您的網頁中可以大大增強用戶體驗，並為您的網站增添視覺趣味。使用Tailwind CSS，您可以輕鬆建立一個在所有裝置和螢幕尺寸上都表現出色的全螢幕背景影片。

方法

我們將介紹兩種新增全螢幕背景影片的方法 -

使用 HTML5
使用 CSS 背景圖片屬性

方法一：使用HTML5的

#第1 步 - 建立一個HTML 檔案並在檔案頭包含Tailwind CSS CDN 連結-

範例

讓我們看一下一個例子可以更好地理解這一點。

<!DOCTYPE html>
<html>
<head>
   <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>

登入後複製

第二步驟 - 建立一個class為"bg-video"的容器元素，並在內部加入class為"bg-video__content"的

<div class="bg-video">
   <video class="bg-video__content" autoplay muted loop>
      <source src="Particles.mp4" type="video/mp4">
   </video>
</div>

登入後複製

注意 - 在這裡，我們使用了從Pixabay下載的免版稅影片

步驟 3 - 在 CSS 檔案中，使用 .bg-video 類別將影片設為全螢幕並隱藏溢出 -

.bg-video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
}
.bg-video__content {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

登入後複製

此方法使用 HTML5

第四步驟 - 將完整的程式碼合併為一個單獨的index.html，如下所示-

範例

讓我們看一個例子來更好地理解這個。

<!DOCTYPE html>
<html>
<head>
   <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
   <style>
      .bg-video {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         overflow: hidden;
      }
      .bg-video__content {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
      }
   </style>
</head>
<body>
   <div class="bg-video">
      <video class="bg-video__content" autoplay muted loop>
         <source src="https://mazwai.com/videvo_files/video/free/2018-03/small_watermarked/180301_15_B_KowloonPark_06_preview.webm" type="video/mp4">
      </video>
   </div>
</body>
</html>

登入後複製

方法二：使用CSS的background-image屬性

步驟1 - 建立一個HTML文件，並在文件的頭部包含Tailwind CSS CDN連結-

範例

現在我們將使用一個範例來探索這個。

<!DOCTYPE html>
<html>
<head>
   <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>

登入後複製

第二步驟 - 建立一個class為"bg-video"的容器元素，並在容器內加入任何您想要的內容 -

<div class="bg-video">
   <p>Welcome to Tutorials Point</p>
</div>

登入後複製

步驟 3 - 從像Pixabay這樣的網站下載免版稅視頻，並使用線上轉換器將您的視頻轉換為gif。

第四步 - 在您的CSS檔案中，使用.bg-video類別和background-image屬性將影片設定為背景 -

bg-video {
   background-image: url('particles.gif');
   background-size: cover;
   background-position: center;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   color: white;
}

登入後複製

此方法使用 CSS background-image 屬性將全螢幕背景影片新增到您的網頁。 background-size 和 background-position 屬性用於確保影片正確縮放和定位。

第 5 步驟 - 組合成單一 index.html 的完整程式碼如下 -

範例

我們現在將使用範例來探討這一點.

<!DOCTYPE html>
<html>
<head>
   <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
   <style>
      .bg-video {
         background-image: url('https://media.giphy.com/media/B0g68d61knrG0/giphy.gif');
         background-size: cover;
         background-position: center;
         display: flex;
         align-items: center;
         justify-content: center;
         width: 100%;
         height: 100%;
         color: white;
      }
   </style>
</head>
<body>
   <div class="bg-video">
      <h1>Welcome to Tutorials Point</h1>
   </div>
</body>
</html>

登入後複製