Wie füge ich mit Tailwind CSS ein Vollbild-Hintergrundvideo hinzu?-HTML-Tutorial-php.cn

Wie füge ich mit Tailwind CSS ein Vollbild-Hintergrundvideo hinzu?

PHPz

Freigeben： 2023-09-06 21:17:02

nach vorne

1174 Leute haben es durchsucht

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

Einführung

In diesem Artikel zeigen wir Ihnen, wie Sie mit Tailwind CSS ein Vollbild-Hintergrundvideo zu Ihrer Webseite hinzufügen. Tailwind CSS ist ein Utility-First-CSS-Framework, das die Erstellung reaktionsfähiger und konsistenter Designs erleichtert. Es stellt eine Reihe von CSS-Klassen bereit, mit denen Sie schnell Stile zu HTML-Elementen hinzufügen können.

Das Hinzufügen von Vollbild-Hintergrundvideos zu Ihren Webseiten kann das Benutzererlebnis erheblich verbessern und Ihrer Website visuelles Interesse verleihen. Mit Tailwind CSS können Sie ganz einfach ein Vollbild-Hintergrundvideo erstellen, das auf allen Geräten und Bildschirmgrößen gut funktioniert.

Methode

Wir stellen zwei Möglichkeiten vor, ein Hintergrundvideo im Vollbildmodus hinzuzufügen -

Verwendung von HTML5-
Verwenden Sie die CSS-Hintergrundbildeigenschaft

Methode 1: Verwenden Sie den HTML5-Tag

Schritt 1 – Erstellen Sie eine HTML-Datei und fügen Sie den Tailwind CSS CDN-Link in den Header der Datei ein –

Beispiel

Schauen wir uns ein Beispiel an, um dies besser zu verstehen.

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

Nach dem Login kopieren

Schritt 2 – Erstellen Sie ein Containerelement mit der Klasse „bg-video“ und fügen Sie darin ein

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

Nach dem Login kopieren

HINWEIS

– Hier haben wir ein lizenzfreies Video verwendet, das von Pixabay heruntergeladen wurde

Schritt 3

– Verwenden Sie in der CSS-Datei die Klasse .bg-video, um das Video auf Vollbild einzustellen und den Überlauf auszublenden –

.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%;
}

Nach dem Login kopieren

Diese Methode verwendet das HTML5-Tag

, um Ihrer Webseite ein Hintergrundvideo im Vollbildmodus hinzuzufügen. Autoplay-, Stumm- und Loop-Eigenschaften sorgen dafür, dass das Video automatisch wiederholt wird. Das

-Tag wird verwendet, um die Video-URL anzugeben.

Schritt 4

– Kombinieren Sie den vollständigen Code in einer einzigen index.html, wie unten gezeigt – Beispiel

Sehen wir uns ein Beispiel an, um dies besser zu verstehen.

<!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>

Nach dem Login kopieren

Methode 2: Verwenden Sie die Eigenschaft „Hintergrundbild“ von CSS

Schritt 1

– Erstellen Sie eine HTML-Datei und fügen Sie den Tailwind CSS CDN-Link in den Kopf der Datei ein – Beispiel

Jetzt werden wir dies anhand eines Beispiels untersuchen.

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

Nach dem Login kopieren

Schritt 2

– Erstellen Sie ein Containerelement mit der Klasse „bg-video“ und fügen Sie beliebige Inhalte in den Container ein –

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

Nach dem Login kopieren

Schritt 3

– Laden Sie lizenzfreie Videos von Websites wie Pixabay herunter und verwenden Sie einen Online-Konverter, um Ihre Videos in GIFs umzuwandeln.

Schritt 4

– Legen Sie in Ihrer CSS-Datei das Video als Hintergrund fest, indem Sie die .bg-video-Klasse und die Eigenschaft „Hintergrundbild“ verwenden –

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;
}

Nach dem Login kopieren

Diese Methode verwendet die CSS-Eigenschaft „Hintergrundbild“, um Ihrer Webseite ein Hintergrundvideo im Vollbildmodus hinzuzufügen. Die Eigenschaften

background-size

und background-position werden verwendet, um sicherzustellen, dass das Video richtig skaliert und positioniert wird.

Schritt 5

– Der vollständige Code, zusammengefasst in einer einzigen index.html, finden Sie unten – Beispiel

Wir werden dies nun anhand eines Beispiels untersuchen.

<!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>

Nach dem Login kopieren

Fazit

In diesem Artikel zeigen wir Ihnen, wie Sie mit Tailwind CSS ein Vollbild-Hintergrundvideo zu Ihrer Webseite hinzufügen. Wir haben zwei Möglichkeiten zum Hinzufügen eines Hintergrundvideos beschrieben, bei denen beide die Verwendung der Tailwind-CSS-Klassen erfordern, um den gewünschten Effekt zu erzielen

Die erste Methode verwendet das HTML5-Tag

, um ein Vollbild-Hintergrundvideo hinzuzufügen, während die zweite Methode die CSS-Eigenschaft „Hintergrundbild“ verwendet. Beide Methoden sind einfach und leicht umzusetzen, und Sie können diejenige auswählen, die Ihren Anforderungen am besten entspricht.

Das obige ist der detaillierte Inhalt vonWie füge ich mit Tailwind CSS ein Vollbild-Hintergrundvideo hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!