Bagaimana untuk membenamkan video latar belakang dalam HTML/CSS?
P粉176203781
P粉176203781 2023-11-06 13:59:13
0
1
760

Hello semua, saya menghadapi masalah baru-baru ini. Saya cuba untuk menetapkan latar belakang video ke tapak saya, tetapi teks berpusat berjalan sehingga ke bawah, saya tidak tahu mengapa, namun bar navigasi baik. Saya telah melakukan banyak kajian tetapi tidak dapat mencari penyelesaian.

Untuk CSS, saya membuat tetapan berikut:


*{ margin: 0; padding: 0; box-sizing: border-box; font-family: TESLA Regular; } .hero{ width: 100%; height: 100vh; background-image: linear-gradient(rgba(12,3,51,0.3)); position: relative; padding: 0 5%; display: flex; align-items: center; justify-content: center; } nav{ width: 100%; position: absolute; top: 0; left: 0; padding: 20px 8%; display: flex; align-items: center; justify-content: space-between; } nav .logo{ width: 150px; } nav ul li{ list-style: none; display: inline-block; margin-left: 40px; } nav ul li a{ text-decoration: none; color: #fff; } .content{ text-align: center; } .content h1{ font-size: 160px; color: rgb(110, 57, 57); font-weight: 600; transition: 0.5s; } .content h1{ -webkit-text-stroke:2px rgb(212, 28, 28) ; color: transparent; } .back-video{ position: absolute; right: 0; bottom: 0; z-index: -1; } @media (min-aspect-ratio: 16/9){ .back-video{ width: 100%; height: auto; } } @media (max-aspect-ratio: 16/9) { .back-video { width: auto; height: 100%; } } > 对于HTML,我做了以下设置
      Document  

Gaming is not a crime!


P粉176203781
P粉176203781

membalas semua (1)
P粉314915922

Ya, anda boleh menambah video sebagai latar belakang menggunakan HTML dan CSS.

1) Tambahkan teg video dan rujukan video dalam fail HTML seperti yang ditunjukkan di bawah:

2) Tetapkan lebar dan tinggi kepada 100% untuk menutup keseluruhan tetingkap dan gunakan kedudukan tetap untuk menetapkan video sebagai latar belakang. Anda mungkin menghadapi isu berkaitan keterlihatan, tetapi ini boleh diselesaikan menggunakan indeks z dan kesan tindanan latar belakang.

#myVideo { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; }
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan
    Tentang kita Penafian Sitemap
    Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!