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>
请分享您的当前代码 –