Html 带面罩的响应式div

基于面具的想法，我试着在一个水平的，同样高度的潜水器上进行测试

结果，遮罩无法展开以覆盖div

Html:

我设置的测试的小提琴在这里： 您将从小提琴中看到，实际上只有一种尺寸的遮罩可以正确覆盖div。考虑到我使用了遮罩的百分比值，我预计它会随着遮罩的div而膨胀/收缩

---

问题是，你们到底怎么能在一个反应灵敏的潜水器上得到一个反应灵敏的面具

使覆盖对视频父级响应的方法是在父级上使用位置：相对，然后使用位置：绝对；排名：0；左：0；右：0；底部：0；它将符合父对象的任何形状

.IndexBanners{ 显示器：flex； 边缘顶部：20px； } .bannerimages{ 弹性：100； 位置：相对位置； } img{ 最大宽度：100%； 高度：自动； 垂直对齐：顶部； } .黑匣子{ 文本对齐：居中； 字体大小：16px； 颜色：fff； 背景色：rgba00,00,00,0.8； 不透明度：0.75； 过渡：所有0.5s缓进缓出； 位置：绝对位置； 顶部：0；左侧：0；右侧：0；底部：0； } .黑匣子：悬停{ 不透明度：0.0； 过渡：所有0.5s缓进缓出； } 氢{ 垫面：23%； 保证金：0； } @介质最大宽度：600px{ .IndexBanners{ 显示：块； } .首先{ 位置：相对位置； 垫底：56.25%； 身高：0； } .第一个iframe{ 位置：绝对位置； 排名：0； 左：0； 宽度：100%； 身高：100%； } } 观看视频 浏览新闻

---

这就是你想做的吗？是的，就是这样！我将研究您的更改，以便下次我想这样做时可以学习。如果你把它作为一个答案，我很乐意接受。对于那个因为不清楚我在问什么而把它标记为接近的人，也许你应该试着阅读整篇文章，特别是最后一行，清楚地说你到底应该如何在一个反应灵敏的div上得到一个反应灵敏的面具？迈克尔·科克，我刚刚发现了其中的一个缺陷。当您将鼠标悬停在嵌入式视频上时，无法开始播放它。我假设带掩码的div位于视频顶部，从而阻止了视频上的单击操作。@很不幸，这是一个新问题。它存在于旧的布局中，在这篇文章中没有提到你想要的东西。我看了一下，但解决办法并不十分明显，否则我会帮你解决的。看看你能不能弄明白，如果不能，写一篇新的帖子。如果你愿意，请随时打电话给我，我会看看我是否能解决它。

<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>

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