WebGL 动画下的 HTML 内容不可点击

Question

我试图弄清楚为什么 WebGL 动画下面的 HTML 内容不能被点击或交互。

请参阅example。

目前包含动画的div设置为：

.webgl-glitch {
    position: absolute;
    z-index: 2;
    overflow: hidden;
    opacity: 0.5;
}

..否则根本不会显示。

我尝试设置 z-index: 1;标题/容器 div 上的属性，但这似乎没有帮助。

这是标题的 HTML 部分，包括动画 div：

<!-- Begin Header animation -->
<div class="webgl-glitch"></div>
<!-- End Header animation -->


<header id="principalheader" class="centerContainer aligncenter fullScreen tintBackground stonebackground" style="z-index:1">
    <div>
        <div class="container">
            <!-- Site logo-->
            <a href="#" class="logo"><img alt="KUBO" src="img/logo.png"></a>
            <!-- Site Principal slogan-->
            <h1>Digital Exploration for the the digital age</h1>
            <!-- Site Resume-->
            <div class="row">
                <div class="hidden-xs col-md-10 col-md-offset-1">
                    <h2>CRAFT experiences that <strong>defy</strong> expectations<br/>
                        CREATE from the the twin <strong>virtues</strong> of inspiration and innovation<br/>
                        BEAUTY in simplicity and complexity <strong>combined</strong> for the best of both worlds</h2>
                </div>
                <div class="col-md-10 col-md-offset-1">
                    <a class="fa fa-angle-down" href="#" data-scrollto="#about"></a>
                </div>
            </div>
        </div>
    </div>
</header>

我注意到的另一件事是，如果我将 .web-glitch 动画 div 包装在 HTML5 画布元素中，它也根本不显示？为什么会这样？

目前我在 CSS 中画布上的唯一属性是 width: 100%;

Answer 1

不是因为 WebGL 动画，而是因为 .webgl-glitch <div>。将一个 HTML 元素放在另一个 HTML 元素之上可以防止点击它下面的任何内容；透明与否无关紧要。

至于<canvas>：你放在<canvas> 元素中的任何东西都应该是不支持该元素的浏览器的占位符；如果您的浏览器支持它，<canvas> 中的任何内容都将被忽略；所以，如果你有这样的事情：

<canvas>
    <h1>Sorry, but your browser does not support the canvas element.</h1>
</canvas>

在不支持画布的浏览器上，消息“抱歉，您的浏览器不支持画布元素”。将显示给用户；另一方面，支持画布的浏览器将根本不显示画布标签内的元素，并允许画布正常运行。