Rumah > Artikel > hujung hadapan web > Bagaimana untuk menambah video latar belakang skrin penuh menggunakan Tailwind CSS?
Bagaimana untuk menambah video latar belakang skrin penuh menggunakan Tailwind CSS?
- PHPzke hadapan
- 2023-09-06 21:17:021219semak imbas
Pengenalan
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.
Kaedah
Kami akan memperkenalkan dua cara untuk menambah video latar belakang skrin penuh -
Gunakan HTML5
Gunakan sifat imej latar belakang CSS
Kaedah 1: Gunakan tag 39000f942b2545a5315c57fa3276f220 HTML5
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 39000f942b2545a5315c57fa3276f220 dengan kelas "bg-video__content" di dalam -
<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%;
}
Kaedah ini menggunakan teg HTML5 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>
Kaedah 2: Gunakan sifat imej latar belakang CSSLangkah 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;
}
Kaedah ini menggunakan sifat imej latar belakang CSS untuk menambah video latar belakang skrin penuh pada halaman web anda. Sifat 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>
KesimpulanDalam artikel ini, kami menunjukkan kepada anda cara menambahkan video latar belakang skrin penuh pada halaman web anda menggunakan Tailwind CSS. Kami telah membincangkan dua cara untuk menambah video latar belakang, kedua-duanya melibatkan penggunaan kelas CSS Tailwind untuk mencipta kesan yang diingini
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!