2017-03-11 30 views
0

的一部分,我知道可以用CSS來創建一個全屏幕視頻背景視頻背景只有在身體

,但我怎麼能只顯示一部分視頻背景是什麼?

例如,我在創建部分800 * 600盒

如何使這部分的背景是視頻的背景下,其餘部分仍然是一個形象的背景?

這裏是我的CSS代碼部分

nav{ 
    width: 800px; 
    height: 600px; 
    padding: 10px; 
    border: 5px solid black; 
    margin: 0; 
    align-content: center; 
    text-align: center; 
    background-color: white; 
    margin:auto; 
    margin-top: 10px; 
    margin-bottom: 50px; 

} 

video#bgvid { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -100; 
    -ms-transform: translateX(-50%) translateY(-50%); 
    -moz-transform: translateX(-50%) translateY(-50%); 
    -webkit-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
    background: url(polina.jpg) no-repeat; 
    background-size:cover; 
} 

和HTML代碼

<nav> 
    <video autoplay="autoplay" loop="loop" id="bgvid"> 
    <source src="http://courses.cs.cityu.edu.hk/cs2204/wildlife.mp4" type="video/mp4"> 
    <source src="http://courses.cs.cityu.edu.hk/cs2204/wildlife.ogg" type="video/ogg"> 
    </video> 
</nav> 
+0

請分享您的當前代碼 –

回答

0

你可以給每一個DIV自己的背景,圖像,視頻或只是一種顏色。因此,您可以簡單地將DIV放在彼此之上(較小的元素只覆蓋部分較大的元素),使用絕對位置或固定位置和z-索引進行放置。

您的代碼只包含一個元素,因此無法使用該代碼進行演示。您需要發佈更多內容,並提供更詳細的關於應該在哪裏的信息。