html - 视频背景网格叠加问题

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/