Bonjour à tous, j'ai rencontré un problème récemment. J'essaie de définir un arrière-plan vidéo sur mon site, mais le texte centré va jusqu'en bas, je ne sais pas pourquoi, pourtant la barre de navigation va bien. J'ai fait beaucoup de recherches mais je ne trouve pas de solution.
Pour CSS, j'ai effectué les réglages suivants :
*{
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>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Oui, il est possible d'ajouter des vidéos comme arrière-plans en utilisant HTML et CSS.
1) Ajoutez une balise vidéo et une référence vidéo dans le fichier HTML comme indiqué ci-dessous :
2) Réglez la largeur et la hauteur à 100 % pour couvrir toute la fenêtre et utilisez la position fixe pour définir la vidéo comme arrière-plan. Vous pouvez rencontrer des problèmes liés à la visibilité, mais ceux-ci peuvent être résolus à l'aide des effets de z-index et de superposition d'arrière-plan.
#myVideo { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; }