Bagaimana untuk menambah video latar belakang skrin penuh menggunakan Tailwind CSS?-html tutorial-php.cn

Bagaimana untuk menambah video latar belakang skrin penuh menggunakan Tailwind CSS?

PHPz

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

ke hadapan

1174 orang telah melayarinya

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

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

Langkah 1 - Buat fail HTML dan masukkan pautan CDN Tailwind CSS dalam pengepala -

Contoh

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

Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

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 -

Contoh

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

Salin selepas log masuk

Kaedah 2: Gunakan sifat imej latar belakang CSS

Langkah 1 - Buat fail HTML dan masukkan pautan CDN Tailwind CSS di kepala fail -

Contoh

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

Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

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 -

Contoh

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

Salin selepas log masuk

Kesimpulan

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