html - 带 mask 的响应式 div

Question

基于 Mask position incorrect when I stop using a background image 上的面具想法我在水平、相同高度的响应式 div 上进行了测试。

结果， mask 无法展开以覆盖 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%;
  }
}

我设置的测试 fiddle 在这里:https://jsfiddle.net/3hekqxf7/ 您将从 fiddle 中看到，实际上只有一种尺寸可以使 mask 正确覆盖 div。鉴于我对 mask 使用了百分比值，我预计它会随着 mask 的 div 一起展开/缩小。

问题是，你究竟应该如何在响应式 div 上获得响应式掩码？!

Answer 1

让叠加层响应视频父级的方法是在父级上使用 position: relative，然后使用 position: absolute;顶部:0；左:0；右: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>