0
我有3個主div。一個標題,一個視頻背景和一個內容div。將div定位在固定位置下方div
前兩個是固定位置。我想要內容div去視頻背景下。但是,因爲視頻根據設備的寬度進行縮放,所以我得到兩個#landbg和.para1重疊。是否有一種特定的方式讓它們在相互之間低下,並且即使瀏覽器縮放時也會一直保持在那裏?我曾嘗試在.para1上使用margin-top。這是一個小提琴,看看它是如何工作的。 http://jsfiddle.net/gyc24cm6/2/基本上紅色的酒吧必須放置在與瀏覽器尺寸一起縮放高度的大黑色方塊。
HTML:
<div id="landbg">
<video loop muted autoplay class="landing_video">
<source src="video/landingbg.mp4" type="video/mp4">
</video>
</div>
<div class="para1">
<div class="para_wind" data-parallax="scroll" data-image-src="images/bg1.png">
<img src="images/bg1.png">
</div>
</div>
CSS:
#landbg{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.landing_video{
position: absolute;
top: 70px;
left: 0;
width: 100%;
}
/*Parallax 1 Styling*/
.para1{
width: 100%;
}
.para_wind img{
width: 100%;
height: 200px;
}
Right採納了您的建議並加以實施。爲了獲得所需的效果,我將視頻的位置更改爲無(也可以使用相對)。然後,這保持了veideo縮放,並將我的圖像推到了理想的區域。 http://jsfiddle.net/ne3ttkn6/ – factordog