我正在开发一个新的网站，实现一个视频背景。我已经把它设置好了，这样它就可以填满浏览网站的屏幕高度。有一个容器/行出现在视频下面，直到用户向下滚动才显示。我想做的是把容器抬起来，这样就可以在homepage上看到它，而不必向下滚动。基本上，用户只是看到视频背景和导航栏没有任何内容。我想避免那样。
我使用W3CSS。
(function() {
/*** Video element* @type {HTMLElement} */
var video = document.getElementById("my-video");
/*** Check if video can play, and play it */
video.addEventListener( "canplay", function() {
video.play();
});
})();.content {
/* top: 70%;*/
position: relative;
z-index: 500;
margin-top: -550px;
margin: 0 auto;
width: 100%;
}
.contain-header {
position: relative;
overflow: hidden;
}
.main-header {
min-height:100vh;
display:absolute;
color:#fff;
background-color: rgba(0, 0, 0, 0.4);
}
video#my-video {
position:absolute;
top:50%;
left:50%;
min-width:100%;
min-height:100%;
width:auto;
height:auto;
z-index:-100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-size: cover;
}
video {
display:block;
}<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="contain-header">
<div class="main-header">
<video id="my-video" class="video" muted loop>
<source src="http://media.istockphoto.com/videos/wheel-truck-video-id473253495" type="video/mp4">
</video>
</div>
<div class="w3-container w3-row w3-red w3-center w3-padding-16 content">
<div class="w3-col l4">
<h3>PICK YOUR TRUCK</h3>
<p>We have the right truck for the load! <br>
View Our Fleet</p>
</div>
<div class="w3-col l4">
<h3>WORK FOR US</h3>
<p>Become a Freight Broker<br>
View Benefits/Application</p>
</div>
<div class="w3-col l4">
<h3>CONTACT US</h3>
<p>Can't find what you're looking for?<br>
Call/Email a Representative</p>
</div>
</div>
</div> Working Codepen
最佳答案
我不完全明白你为什么要用那个大红色块遮住那个很酷的背景，所以我把它做成了半透明。
变化
.content {
top: 0;
position: absolute;
height:auto;
...
}
.main-header {
z-index:-1;
...
}
.l4 {
margin-top: 10%;
}
.RED.RED {
background-color: rgba(244, 67, 54, .3) !important;
}
最后一个选择器被加倍以覆盖
background-color的.w3-red规则。我还被迫使用!important（不推荐），因为有三分之一的w3.css规则集具有!important。这是非常顽固和朴素的。不管怎样，颜色是以rgba表示的，前3个数字是红、绿、蓝复合色，第4个数字的不透明度范围是0到1（0不可见，1可见）。补充
.w3-mobile响应性.w3-hide-small在前两列中，因为您希望在有限的空间中只有基本内容. w3-hide-medium如上远离的
.w3-contain固定宽度容器没有响应选项
如果仍然喜欢底部的条形图，请调整以下规则：
.content { top: 0;...到{ bottom: 0;...如果仍希望条形图更不透明，请调整以下规则：
.RED.RED { background-color: rgba(244, 67, 54, .1) !important; }将第四个数字改为1个最大值。演示
(function() {
/*** Video element* @type {HTMLElement} */
var video = document.getElementById("my-video");
/*** Check if video can play, and play it */
video.addEventListener("canplay", function() {
video.play();
});
})();.content {
/* ADDED */
top: 0;
/* ADDED */
position: absolute;
/* ADDED */
height: auto;
z-index: 500;
margin: 0 auto;
width: 100%;
}
.contain-header {
position: relative;
overflow: hidden;
}
.main-header {
height: 100vh;
display: absolute;
color: #fff;
background-color: rgba(0, 0, 0, 0.4);
/* ADDED */
z-index: -1;
}
video#my-video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-size: cover;
}
video {
display: block;
}
/* ADDED ---------------------------*/
.l4 {
margin-top: 10%;
}
.RED.RED {
background-color: rgba(244, 67, 54, .1) !important;
}<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="contain-header">
<div class="main-header">
<video id="my-video" class="video" muted loop>
<source src="http://media.istockphoto.com/videos/wheel-truck-video-id473253495" type="video/mp4">
</video>
</div>
<div class="w3-bar w3-mobile w3-row w3-layout-row w3-red w3-center w3-row-padding content RED">
<div class="w3-col w3-hide-medium w3-hide-small l4">
<h3>PICK YOUR TRUCK</h3>
<p>We have the right truck for the load! <br> View Our Fleet</p>
</div>
<div class="w3-col w3-hide-medium w3-hide-small l4">
<h3>WORK FOR US</h3>
<p>Become a Freight Broker<br> View Benefits/Application</p>
</div>
<div class="w3-coll l4">
<h3>CONTACT US</h3>
<p>Can't find what you're looking for?<br> Call/Email a Representative</p>
</div>
</div>
</div>关于html - 带容器的视频背景，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44185731/