视频背景网格覆盖问题
这可能是我失踪一个非常明显的错误,但无论如何:视频背景网格覆盖问题
我在与使用视频作为一个网站的背景,并用半覆盖它的问题 - 透明的4x4px PNG图像作为网格。网格与视频重叠,因此视频应该通过重复的透明图像显示,但它似乎消失。
电网覆盖问题 网格:
任何帮助,这是极大的(尽管它可能只是代表我的一个非常简单的错误)
这里的问题的一些截图赞赏出现,但没有视频通过它(视频看起来像下面的截图)
网格是一个重复的4x4px PNG,白色2x2px是透明和灰色2x2px在75%不透明度。
在这里被grid.png吹起(太小,附加):
编辑:grid.png附
HTML
<div id="container">
<div class="grid"></div>
<!-- BG-VIDEO -->
<video autoplay loop muted>
<source src="video/video.mov" type="video/mp4">
</video>
<div class="content">
<center>
<div class="titlebox">
<h1>The Redtree Cafe</h1>
</div>
</center>
</div>
</div>
CSS
*{
margin: 0;
padding: 0;
}
/* VIDEO */
#container {
position: fixed;
overflow: hidden;
width: 100%;
height: 100vh;
}
.grid {
background: url(img/grid.png);
width: 100%;
height: 100vh;
z-index: 1000;
}
/*Front Page*/
.titlebox {
z-index: 2000;
}
问题是您的视频在网格下方呈现。其中一个解决这个问题的方法是添加position: absolute
到网格元素:
.grid {
position: absolute;
}
谢谢!就是这样! – TomHill 2014-09-06 08:24:12
如果你不介意我问,你能解释为什么这个职位必须是绝对的吗? – TomHill 2014-09-06 08:31:11
因为在这种情况下,您可以将元素叠加在另一个上面,它们不会向下“推”下一个元素,但会停留在顶部(或下面)。这只是可能的解决方案之一,您可以尝试相对定位与负边距,固定位置等,但我认为这也是最简单的。看到这个:http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ – Shomz 2014-09-06 08:44:58
如果grid.png是hqR7r.png(转贴),并假设是半透明;它不透明,不透明;它是不透明的白色和不透明的灰色。 – Wayne 2014-09-06 08:01:49
不 - hqR7r.png是grid.png的截图,我无法附上实际的文件 – TomHill 2014-09-06 08:06:23
@Wayne - 我已经添加grid.png的帖子(虽然它很小 - 你将不得不斜视):) – TomHill 2014-09-06 08:11:33