Dalam artikel ini, kami akan menunjukkan kepada anda cara menambahkan video latar belakang skrin penuh pada halaman web anda menggunakan Tailwind CSS. Tailwind CSS ialah rangka kerja CSS yang mengutamakan utiliti yang memudahkan untuk mencipta reka bentuk yang responsif dan konsisten. Ia menyediakan satu set kelas CSS yang boleh anda gunakan untuk menambah gaya pada elemen HTML dengan cepat.
Menambahkan video latar belakang skrin penuh pada halaman web anda boleh meningkatkan pengalaman pengguna dan menambah minat visual pada tapak web anda. Menggunakan Tailwind CSS, anda boleh membuat video latar belakang skrin penuh dengan mudah yang berprestasi baik pada semua peranti dan saiz skrin.
Kami akan memperkenalkan dua cara untuk menambah video latar belakang skrin penuh -
Gunakan HTML5
Gunakan sifat imej latar belakang CSS
Langkah 1 - Buat fail HTML dan masukkan pautan CDN Tailwind CSS dalam pengepala -
ContohMari kita lihat contoh untuk memahami perkara ini dengan lebih baik.
<!DOCTYPE html> <html> <head> <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> </head> <body>
Langkah 2 - Buat elemen bekas dengan kelas "bg-video" dan tambah teg
<div class="bg-video">
<video class="bg-video__content" autoplay muted loop>
<source src="Particles.mp4" type="video/mp4">
</video>
</div>
NOTA - Di sini kami menggunakan video bebas royalti yang dimuat turun daripada Pixabay
Langkah 3 - Dalam fail CSS, gunakan kelas .bg-video untuk menetapkan video kepada skrin penuh dan menyembunyikan limpahan -
.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%;
}
untuk menambahkan video latar belakang skrin penuh pada halaman web anda. Automain, redam dan sifat gelung memastikan gelung video secara automatik. Teg
Langkah 4 - Gabungkan kod lengkap ke dalam satu index.html seperti yang ditunjukkan di bawah -
ContohMari kita lihat contoh untuk memahami perkara ini dengan lebih baik.
<!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>
Langkah 1 - Buat fail HTML dan masukkan pautan CDN Tailwind CSS di kepala fail -
ContohSekarang kita akan meneroka ini menggunakan contoh.
<!DOCTYPE html> <html> <head> <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> </head> <body>
Langkah 2 - Buat elemen bekas dengan kelas "bg-video" dan tambahkan sebarang kandungan yang anda mahukan di dalam bekas -
<div class="bg-video"> <p>Welcome to Tutorials Point</p> </div>
Langkah 3 - Muat turun video bebas royalti daripada tapak seperti Pixabay dan gunakan penukar dalam talian untuk menukar video anda kepada gif.
Langkah 4 - Dalam fail CSS anda, tetapkan video sebagai latar belakang menggunakan kelas .bg-video dan sifat imej latar belakang -
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;
}
saiz latar dan kedudukan latar belakang digunakan untuk memastikan video itu diskalakan dan diletakkan dengan betul.
Langkah 5 - Kod lengkap digabungkan menjadi satu index.html adalah di bawah -
ContohKami kini akan meneroka perkara ini menggunakan contoh.
<!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>
Kaedah pertama menggunakan teg HTML5
untuk menambah video latar belakang skrin penuh, manakala kaedah kedua menggunakan sifat imej latar belakang CSS. Kedua-dua kaedah adalah mudah dan mudah untuk dilaksanakan, dan anda boleh memilih kaedah yang paling sesuai dengan keperluan anda.
Atas ialah kandungan terperinci Bagaimana untuk menambah video latar belakang skrin penuh menggunakan Tailwind CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Bagaimana untuk menyelesaikan masalah bahawa pintasan IE tidak boleh dipadamkan
Bagaimana untuk melangkau pengaktifan dalam talian dalam win11
Tutorial Java
Analisis statistik
Sistem komputer terdiri daripada
Perbezaan antara topeng tampal dan topeng pateri
Penggunaan fungsi datediff MySQL
kb4012212 Apa yang perlu dilakukan jika kemas kini gagal
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
