Question

我有视频背景，它占据了我网站的整个空间，当我希望它只覆盖网站的一部分，标题部分。我希望这是有道理的。

<div class="container-fluid">

            <div id="header" class="header-section">

                <video autoplay loop id="backgroundvideo">
                    <source src="videos/BackgroundVideo.webm" type="video/webm">
                    <source src="videos/BackgroundVideo.mp4" type="video/mp4">
                </video>
            </div>
</div>

这是视频的CSS：

video#backgroundvideo {
    position: fixed; 
    right: 0; 
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto; 
    z-index: -100;
    background-size: cover;
}

Answer 1

查看此Example。

CSS

video#backgroundvideo {
position: absolute; 
right: 0; 
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto; 
height: auto; 
z-index: -100;
background-size: cover;
}
.header-section {
width:100%;
height:200px;
background:#d7d7d7;
}

Answer 2

video#backgroundvideo{
position: absolute; 
right: 0px;
left:0px; 
top: 200px;
min-width: 100%;
min-height: 100%;
background-size: cover;
}
.header-section{
width:100%;
height:200px;
background:#d7d7d7;
}

CSS视频背景是全屏，只需要它为部分

2 个答案: