Heim > Artikel > Web-Frontend > Wie füge ich mit Tailwind CSS ein Vollbild-Hintergrundvideo hinzu?
Wie füge ich mit Tailwind CSS ein Vollbild-Hintergrundvideo hinzu?
- PHPznach vorne
- 2023-09-06 21:17:021132Durchsuche
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 39000f942b2545a5315c57fa3276f220
Schritt 1 – Erstellen Sie eine HTML-Datei und fügen Sie den Tailwind CSS CDN-Link in den Header der Datei ein –
BeispielSchauen 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>
Schritt 2 – Erstellen Sie ein Containerelement mit der Klasse „bg-video“ und fügen Sie darin ein 39000f942b2545a5315c57fa3276f220-Tag mit der Klasse „bg-video__content“ hinzu
<div class="bg-video">
<video class="bg-video__content" autoplay muted loop>
<source src="Particles.mp4" type="video/mp4">
</video>
</div>
– 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%;
}
Diese Methode verwendet das HTML5-Tag
-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>
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>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>
– 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;
}
Diese Methode verwendet die CSS-Eigenschaft „Hintergrundbild“, um Ihrer Webseite ein Hintergrundvideo im Vollbildmodus hinzuzufügen. Die Eigenschaften
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>
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!