[英]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.