0
我有一個帶視頻背景的引導jumbotron。視頻背景是絕對位置和z-index：-1，jumbotron div是位置相對和z-index：1。這裏所需的結果是在視頻頂部有一個白色透明覆蓋圖。然而，背景屬性是不可見的，即使我把它切換爲純色。這裏是一個筆：https://codepen.io/anon/pen/LLEOoO?editors=1100z-index'ed父div背景不顯示
HTML
<div class="container">
<div id="block-1" class="block row jumbotron">
<div class="col col-md-12">
<respond-html id="html-5" description="HTML">
<video class="video-background" autoplay="" loop="" poster="/static/template/themes/video-theme/video/video.jpg">
<source src="https://host.ohiocashflow.com/sites/home-giveaway/videos/Productive-Morning.webm" type="video/webm">
<source src="https://host.ohiocashflow.com/sites/home-giveaway/videos/Productive-Morning.mp4" type="video/mp4">
</video>
</respond-html>
<div id="image-1" class="respond-image">
<img src="https://host.ohiocashflow.com:443/sites/home-giveaway/files/logo.png">
</div>
<p>Your purpose in life has to be bigger and better than yourself... <a href="#">DONATE</a></p>
</div>
</div>
</div>
CSS
.container .jumbotron{
position: relative;
box-sizing: border-box;
background: rgba(255,255,255,.5);
border-radius: 0 !important;
color: #fff;
max-width: 100%;
margin: 0 0 0 0;
padding: 150px 0 0 0;
text-align: center;
height: 350px;
z-index: 1;
}
.video-background {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: 100%;
height: auto;
z-index: -1;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}