cari

Rumah  >  Soal Jawab  >  teks badan

Bagaimana untuk membenamkan video latar belakang dalam HTML/CSS?

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，我做了以下设置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="hero">
    
        <video autoplay loop muted plays-inline>
            <source src="mylive.mp4" type="video/mp4">
        </video>
        <nav>
            <img src="2086940.jpg" class="logo" alt="">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Zone</a></li>
                <li><a href="#">Gaming</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">About us</a></li>
    
            </ul>
        </nav>
        <div class="content">
            <h1>Gaming is not a crime!</h1>
        </div>
</body>
</html>


P粉176203781P粉176203781384 hari yang lalu941

membalas semua(1)saya akan balas

  • P粉314915922

    P粉3149159222023-11-07 11:31:24

    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: 

    <video autoplay muted loop id="myVideo">
  <source src="rain.mp4" type="video/mp4">
</video>

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

    balas
    0
  • Batalbalas