html - 带容器的视频背景

Question

我正在开发一个实现视频背景的新网站。我已将其设置为填满浏览网站的屏幕高度。在用户向下滚动之前，视频下方会出现一个容器/行。我想做的是把那个容器放起来，这样它就可以在 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

Answer 1

不完全理解为什么你想用那个大红色 block 遮住那个很酷的背景，所以我把它设为半透明。

变化

.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;
}

最后一个选择器被加倍以覆盖 .w3-red 的 background-color 规则。我也被迫使用 !important(不推荐)，因为三分之一的 w3.css 规则集有 !important。这是非常不灵活的，而且很糟糕。无论如何，颜色在 rgba 中，前 3 个数字是红色、绿色、蓝色的复合颜色，第四个数字的不透明度范围为 0 到 1(0 是不可见的，1 是可见的)。

已添加

• .w3-mobile 用于响应

• .w3-hide-small 在前 2 列，因为您希望在有限的空间内只包含必要的内容

• 。 w3-hide-medium 同上

已删除

• .w3-contain 固定宽度的容器没有响应

选项

• 如果您仍然喜欢底部的栏，请调整以下规则:

  • .content { top: 0;... 到 { bottom: 0;...

• 如果您仍然希望栏更不透明，请调整以下规则:

  • .RED.RED { 背景色: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>