z-index'ed父div背景不显示

我有一个带视频背景的引导jumbotron。视频背景是绝对位置和z-index：-1，jumbotron div是位置相对和z-index：1。这里所需的结果是在视频顶部有一个白色透明覆盖图。然而，背景属性是不可见的，即使我把它切换为纯色。这里是一个笔：https://codepen.io/anon/pen/LLEOoO?editors=1100 z-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...&nbsp;<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%); 
}

来源

2017-06-05 Sandra Willford

当您添加z-index父，创建一个新的堆叠顺序开始在父。如果您希望子元素低于其父元素，请删除父元素z-index，并在子元素上使用负值z-index。

.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; 
 
} 
 

 
.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%); 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<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...&nbsp;<a href="#">DONATE</a></p> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-06-05 16:01:12

z-index'ed父div背景不显示

回答

相关问题