Hallo zusammen, ich bin kürzlich auf ein Problem gestoßen. Ich versuche, einen Videohintergrund für meine Website festzulegen, aber der Text läuft zentriert bis ganz nach unten, ich weiß nicht warum, aber die Navigationsleiste ist in Ordnung. Ich habe viel recherchiert, kann aber keine Lösung finden.
Für CSS habe ich folgende Einstellungen vorgenommen:
*{
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>
是的，可以使用HTML和CSS将视频作为背景添加。
1)在HTML文件中添加视频标签和视频引用，如下所示：
2)将宽度和高度设置为100%，以覆盖整个窗口，并使用position fixed将视频设置为背景。可能会遇到与可见性相关的问题，但可以使用z-index和背景叠加效果来解决。
#myVideo { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; }