在引導

我試圖用一個視頻作爲一個div背景視頻創建覆蓋，我無法管理，以顯示div的內容視頻疊加..在引導

這裏是我的HTML：

您的瀏覽器不支持視頻標籤。我建議你升級你的瀏覽器。

<div class="container text-center"> 
     <h1>Personal Portfolio</h1> 
     <p>Graphic design, Web developement & Social Media</p> 
     <img class="image-responsive" src="https://s32.postimg.org/qrpva9fed/profile.jpg" style="border-radius:50%; width:15%"> 
    </div><!-- End container --> 
</div><!-- End jumbotron-->

這裏是我的CSS：

.jumbotron{ 
    position: relative; 
    overflow: hidden; 
} 
.container .text-center{ 
    z-index: 1000 !important; 
} 
#video-background { 
    position: absolute; 
    background: #222; 
    width:100%; 
    background-size: cover; 
    transition: 1s opacity; 
    opacity: 0.7; 
    top: 0; 
    left: 0; 
}

我一直在使用的z-index沒有運氣tryed，這裏有一個鏈接到codepen：

https://codepen.io/Alique/pen/JKRxZd

之前非常感謝手。

來源

2016-06-25 Alfredo Astort

你要把你的視頻準確地放在哪裏？我無法在'codepen'中找到任何視頻 –

你會再看一遍嗎？它是在.jumbotron div –

好的，檢查答案我改變了你的代碼。其所有工作知道:) –

這裏是Working Fiddle

這是製造問題的事情是，你必須使用pseudo elements爲overlaying不混濁，並且還使用了第二section與position:absolute和第一section與position:relative，使第二個section出現在第一個section的頂部，然後z-index將按您的要求工作。

HTML

裹你video在一個div

<div class="video-background"> 
<video autoplay="" loop="" class="fillWidth fadeIn animated" poster="https://s3-us-west-2.amazonaws.com/coverr/poster/Traffic-blurred2.jpg" id="video-background"> 
<source src="https://s3-us-west-2.amazonaws.com/coverr/mp4/Traffic-blurred2.mp4" type="video/mp4">Your browser does not support the video tag. I suggest you upgrade your browser.

CSS

.jumbotron{ 
    position: relative; 
    overflow: hidden; 
    padding:0px !important; 
} 
.container .text-center{ 
    z-index: 1000 !important; 
} 
.video-background:before{ 
left: 0; 
right: 0; 
top: 0; 
bottom: 0; 
position: absolute; 
content: ""; 
background-color: #000; 
opacity: 0.39; 
z-index: 6; 
} 
.video-background { 
    position: relative; 
background: #222; 
width:100%; 
z-index:5; 
    } 
#video-background{ 
background-size: cover; 
transition: 1s opacity; 
} 

.cover-text{ 
position:absolute; 
width:100%; 
text-align:center; 
z-index:9999; 
top:5em; 
} 

.cover-text h1, .cover-text p{ 
color:#fff !important; 
}

謝謝

來源

2016-06-26 05:47:47

非常感謝我現在瞭解。 –

工作小提琴鏈接提供了一個錯誤。 –

回答

相關問題