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。

感谢您的意见。

来源

2015-12-02 cookavich

使用此CSS：'html，body {width：100％; “ –

请注意，如果您决定使用自动播放功能，则最好在默认情况下将其静音，并在移动设备上最初停用视频。前者是因为没有人喜欢音频如果你没有要求它弹出。后者是因为那些用户想要节省带宽。另外，你在这里做出一些奇怪的决定。将w和h设置为100％内联，然后用auto覆盖CSS，然后将最小值设置为100％？最后，我们需要看到其他代码。因为即使先前的笔记有效，它仍然应该起作用。当且仅当其他元素也相对定位时。 –

在Wordpress中开发，这就是为什么有内联样式。无法帮助。 – cookavich

与同事一点点帮助解决它。这里的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覆盖视频。

感谢您的意见。

来源

2015-12-02 16:22:33 cookavich

添加这个CSS属性

html, body { 
    width:100%; 
    height:100%; 
}

来源

2015-12-02 13:52:30 RAP

100％的固定位置覆盖屏幕

回答

相关问题