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>
請分享您的當前代碼 –