带掩码的响应div

Question

基于Mask position incorrect when I stop using a background image上的掩码思想，我尝试了一个水平的、同样高度响应的div测试。

结果，掩模无法扩展以覆盖div。

Html：

<div class="IndexBanners">
<div class="bannerimages effect first">
<iframe class="embed-responsive-item" frameborder="0" src="https://www.youtube.com/embed/GfaiXgY114U" height="100%" width="100%"></iframe>
<div class="black-box">
  <h2>Watch Video</h2>
</div>
</div>
<div class="bannerimages effect">
<a href="https://placehold.it"><img src="http://placehold.it/795x436"></a>
<div class="black-box">
  <h2>View News</h2>
</div>
</div>

CSS：

.IndexBanners {
    display: flex;
    margin-top: 20px;
}

.bannerimages {
    flex: 1 0 0;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
}

.black-box {
    text-align: center;
    font-size: 16px;
    color: #fff;
    background-color: rgba(00, 00, 00, 0.8);
    width: 49%;
    height: 66%;
    opacity: 0.75;
    transition: all 0.5s ease-in-out;
    position: absolute;
    top: 20px;
}

.black-box:hover {
    opacity: 0.0;
    transition: all 0.5s ease-in-out;
}

h2 {
    padding-top: 23%;
    margin: 0;
}

@media (max-width:600px) {
.IndexBanners {
    display: block;
}
.first {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}
.first iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

我设置的测试小提琴是这样的：https://jsfiddle.net/3hekqxf7/，您将从小提琴中看到，实际上只有一个大小的口罩正确地覆盖了div。考虑到我使用了掩码的百分比值，我会期望它和它正在掩蔽的div一起展开/收缩。

问题是，你到底该如何在一个有反应的div上得到一个响应性的掩膜？！

Answer 1

使覆盖与视频父级响应的方法是在父服务器上使用position: relative，然后在覆盖层上使用position: absolute; top: 0; left: 0; right: 0; bottom: 0;，并且它将符合父节点的任何形状。

​

.IndexBanners {
  display: flex;
  margin-top: 20px;
}

.bannerimages {
  flex: 1 0 0;
  position: relative;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

.black-box {
    text-align: center;
    font-size: 16px;
    color: #fff;
    background-color: rgba(00,00,00,0.8);
    
    
    opacity: 0.75;
    transition: all 0.5s ease-in-out;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
}

.black-box:hover {
    opacity: 0.0;
    transition: all 0.5s ease-in-out;
}

h2 {
    padding-top: 23%;
    margin: 0;
}

@media (max-width:600px) {
  .IndexBanners {
    display: block;
  }
  .first {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
  }
  .first iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

<div class="IndexBanners">
  <div class="bannerimages effect first">
    <iframe class="embed-responsive-item" frameborder="0" src="https://www.youtube.com/embed/GfaiXgY114U" height="100%" width="100%"></iframe>
    <!--a href="http://placehold.it"><img src="http://placehold.it/795x436"></a-->
    <div class="black-box">
        <h2>Watch Video</h2>
    </div>
  </div>
  <div class="bannerimages effect">
    <a href="http://placehold.it"><img src="http://placehold.it/795x436"></a>
    <div class="black-box">
        <h2>View News</h2>
    </div>
  </div>
</div>

​