100%的固定位置覆盖屏幕
问题描述:
我建立一个网站,有一个视频的自动播放作为英雄元素,我目前拥有的视频设置为以下CSS:100%的固定位置覆盖屏幕
#video-background {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto !important;
height: auto !important;
z-index: -100;
}
其目的是为了允许它是全宽。固定位置是必需的,因为视频下方的内容需要能够滚动视频。
不幸的是,即使是负Z指数,视频也会阻止您点击页面下方的内容。它仍然覆盖了一切。当我在任何地方点击右键,暂停,取消静音等等控制。
不知道如何防止这种情况发生。我试着玩弄一些设置,但是任何事情(至少我已经尝试过),这使得它的全部结束,导致它覆盖一切。
这里的HTML:
<video autoplay="" loop="" id="video-background" muted="" style="width: 100%; height: 100%;">
<source src="http://beta.mattgrossdesign.com/sites/default/files/wood%20autumn-HD.mp4" type="video/mp4">
</video>
编辑:与同事一点点帮助解决它。这里的CSS:
div#layer_slider_1 {
height: auto;
position: fixed;
top: 0;
width: 100%;
z-index: 0;
}
div#after_layer_slider_1 {
margin-top: 800px;
}
div#layer_slider_1是父div。 div#after_layer_slider_1显然是它后面的div。
感谢您的意见。
答
与同事一点点帮助解决它。这里的CSS:
div#layer_slider_1 {
height: auto;
position: fixed;
top: 0;
width: 100%;
z-index: 0;
}
div#after_layer_slider_1 {
margin-top: 800px;
}
div#layer_slider_1是父div。 div#after_layer_slider_1显然是它后面的div。为了避免它覆盖整个页面,即使使用z-index,也需要使它下面的div覆盖视频。
感谢您的意见。
答
添加这个CSS属性
html, body {
width:100%;
height:100%;
}
使用此CSS:'html,body {width:100%; “ –
请注意,如果您决定使用自动播放功能,则最好在默认情况下将其静音,并在移动设备上最初停用视频。前者是因为没有人喜欢音频如果你没有要求它弹出。后者是因为那些用户想要节省带宽。另外,你在这里做出一些奇怪的决定。将w和h设置为100%内联,然后用auto覆盖CSS,然后将最小值设置为100%?最后,我们需要看到其他代码。因为即使先前的笔记有效,它仍然应该起作用。当且仅当其他元素也相对定位时。 –
在Wordpress中开发,这就是为什么有内联样式。无法帮助。 – cookavich