[英]How can I put a video as a the background of the page in css/html?
我尝试使用<video>
标签将视频作为组件放置,但这似乎涵盖了所有或大部分组件,我问是否有办法将页面的实际背景设置为视频(最好是视频或以其他方式还有 gif)或始终将组件放在所有组件下方。
我最好的尝试,将所有位置都放在相对位置,但所有导航/按钮都不可点击:
<body>
<div>
<video autoplay muted loop id="myVideo">
<source src="/assets/videos/circuit-board-hero.mp4" type="video/mp4">
</video>
</div>
<div>
[...]
</div>
<style>
.nav {
position: relative;
}
.logotext {
padding-left: 20px;
text-decoration: none;
color: #fff;
text-transform: uppercase;
display: block;
font-weight: 600;
letter-spacing: .2em;
font-size: 20px;
position: relative;
}
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
</style>
我用的是SASS顺便说一句,上面编译的是CSS...
尝试这个:
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
z-index:-1;
}
你可以试试这个:
.nav { position: relative; }.logotext { padding-left: 20px; text-decoration: none; color: #fff; text-transform: uppercase; display: block; font-weight: 600; letter-spacing: .2em; font-size: 20px; position: relative; } #myVideo { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; z-index:-1; filter: brightness(0.5); } h1, h2 { color: white; font-family: Trebuchet MS; font-weight: bold; text-align: center; } h1 { font-size: 6rem; margin-top: 30vh; } h2 { font-size: 3rem; }
<,DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <title></title> </head> <body> <div> <video autoplay muted loop id="myVideo"> <source src="https.//assets.codepen.io/6093409/river.mp4" type="video/mp4"> </video> </div> <div> <h1>THIS IS A RIVER.</h1> <h2>How Are you.</h2> </div> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.