我想弄清楚为什么无法点击 WebGL 动画下的 HTML 内容或与之交互。
请参阅example .
当前包含动画的 div 设置为:
.webgl-glitch {
position: absolute;
z-index: 2;
overflow: hidden;
opacity: 0.5;
}
..否则根本不会显示。
我试过设置 z-index: 1; header /容器 div 上的属性,但这似乎没有帮助。
这是 header 的 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 canvas 元素中,它也根本不显示吗?为什么会这样?
目前我在 CSS 中的 Canvas 上唯一的属性是 width: 100%;
最佳答案
这不是因为 WebGL 动画,而是因为 .webgl-glitch
<div>
.将一个 HTML 元素放在另一个 HTML 元素之上可以防止人们点击其下方的任何内容;它是否透明并不重要。
至于<canvas>
: 任何你放在 <canvas>
里的东西元素应该是不支持所述元素的浏览器的占位符;如果你的浏览器支持它,无论放在 <canvas>
中是什么将被简单地忽略;所以,如果你有这样的事情:
<canvas>
<h1>Sorry, but your browser does not support the canvas element.</h1>
</canvas>
在不支持 Canvas 的浏览器上,消息“抱歉,您的浏览器不支持 Canvas 元素。”将显示给用户;另一方面,支持 Canvas 的浏览器将不会显示 Canvas 标签内的元素,并允许 Canvas 正常运行。
关于javascript - WebGL 动画下的 HTML 内容不可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31829856/