如何防止覆蓋div在底部創建額外空間？

我在我的網站上有一個HTML5視頻，上面覆蓋了一個div，它爲它增加了一個很酷的顏色，但由於某種原因，它在它和我的網站中的以下部分之間的底部創建了額外的空間（參見圖像以供參考）如何防止覆蓋div在底部創建額外空間？

正如你可以看到有紫色十歲上下疊加和黃色部分之間小的差距，基本上覆蓋並不適應視頻。

HTML：

<div id="vid-overlay"></div> 
    <div class="vid-container"> 
    <video autoplay loop> 
     <source src="video/Hello-World2.mp4" type="video/mp4"></source> 
     <source src="video/Hello-World2.webm" type="video/webm"></source> 
     </video> 
    </div>

CSS：

video{ 
    width:100%; 
    height:auto; 
    display:block; 
    float:left; 
    margin:0; 
    padding:0; 
} 

#vid-overlay{ 
background: rgba(96,80,99,1); 
background: -moz-linear-gradient(top, rgba(96,80,99,1) 0%, rgba(96,80,99,0.51) 100%); 
background: -webkit-gradient(left top, left bottom, color-stop(0%, 
    position:absolute; 
    margin:0; 
    padding:0; 
    width:100%; 
    height:100%; 
}

來源

2016-08-09 Bodil132

先給了視頻元素 –

你在你的CSS代碼段有一個語法錯誤，內聯width和height屬性之後，「顏色停止（0％」就在說 – amn

是在vid-overlay DIV您的要求必要position:absolute。

如果不是嘗試：position:relative。這可能會解決您的覆蓋錯誤。

來源

2016-08-09 19:38:56

視頻標籤默認爲嵌入塊。你需要使它顯示爲這樣的塊級元素：

video {display: block;}

來源

2017-07-27 00:15:21

如何防止覆蓋div在底部創建額外空間？

回答

相關問題