2017-03-11 33 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-索引进行放置。

您的代码只包含一个元素,因此无法使用该代码进行演示。您需要发布更多内容,并提供更详细的关于应该在哪里的信息。