视频背景网格覆盖问题

Question

这可能是我错过的一个非常明显的错误，但无论如何：

我在使用视频作为网站背景并将其与半透明的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;
}

Answer 1

问题是您的视频正在网格下方呈现。解决此问题的方法之一是将position: absolute添加到网格元素：

.grid {
    position: absolute;
}

请在此处查看：http://jsfiddle.net/6wotw7u3/

Answer 2

你可以先设置

.grid{ opacity.1;}

它会使你的网格透明

如果问题仍然没有解决，他们认为问题是你没有给视频提供css

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