视频背景瓦特/容器

Question

我正在开发一个实现视频背景的新网站。我已将其设置为填充查看网站的屏幕高度。在视频下方出现的容器/行在用户向下滚动之前不会显示。我想要做的就是把容器放好，这样就可以在homepage上看到它，而不必向下滚动。从本质上讲，用户只是在没有任何内容的情况下首先看到视频背景和导航栏。我想避免这种情况。

我使用的是W3CSS。

＆＃13;

＆＃13;

(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();
			});
		})();

＆＃13;

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

＆＃13;

<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> 

＆＃13;

＆＃13;

＆＃13;

Working Codepen

Answer 1

您可以添加：

.main-header {position: fixed; width: 100%;}

然后调整另一个容器的css以查看它的外观。

Answer 2

没有完全明白为什么你想要用那个大红色块遮住那个很酷的背景，所以我把它变成了半透明的。

更改

.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个数字是红色，绿色，蓝色复合颜色，第四个数字的范围是0到1不透明度（0是不可见的，1是可见的）。

添加

• .w3-mobile有关回应

• .w3-hide-small在前2列中，因为您希望在有限的空间内仅包含基本内容

• . w3-hide-medium如上所述

删除

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

选项

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

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

• 如果您仍然希望条形图更加不透明，请调整以下规则：

  • .RED.RED { background-color: rgba(244, 67, 54, .1) !important; }将第四个数字更改为最大值1。

演示

＆＃13;

＆＃13;

(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();
  });
})();

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;