视频背景网格覆盖问题

这可能是我失踪一个非常明显的错误，但无论如何：视频背景网格覆盖问题

我在与使用视频作为一个网站的背景，并用半覆盖它的问题 - 透明的4x4px PNG图像作为网格。网格与视频重叠，因此视频应该通过重复的透明图像显示，但它似乎消失。

电网覆盖问题 Grid appearing, no video though 网格：

任何帮助，这是极大的（尽管它可能只是代表我的一个非常简单的错误）

这里的问题的一些截图赞赏出现，但没有视频通过它（视频看起来像下面的截图） Video that should be showing through the grid

网格是一个重复的4x4px PNG，白色2x2px是透明和灰色2x2px在75％不透明度。

在这里被grid.png吹起（太小，附加）：

blown up 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; 
}

来源

2014-09-06 TomHill

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

问题是您的视频在网格下方呈现。其中一个解决这个问题的方法是添加position: absolute到网格元素：

.grid { 
    position: absolute; 
}

见这里：http://jsfiddle.net/6wotw7u3/

来源

2014-09-06 08:21:29 Shomz

谢谢！就是这样！ – 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{ opacity.1;}

它会让你的网格透明

如果问题仍然没有解决他们的是思考的问题是，你的天堂” t给css视频

video { width:100%; height:400px;}

来源

2014-09-06 07:52:46 himanshu

嗯，没有 - 仍然不工作 - 谢谢你的帮助，虽然 – TomHill 2014-09-06 08:09:06

首先删除你的网格，看看视频是否存在，让我知道 – himanshu 2014-09-06 08:12:22

是的，视频是存在的（与原始代码以及你的代码），如果我注释掉'

' – TomHill 2014-09-06 08:15:27

视频背景网格覆盖问题

回答

相关问题