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上获得响应式面具？！

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>

带掩码的响应div

1 个答案: