html - 图片宽度动态高度叠加

Question

我正在尝试在具有动态高度的图像上构建叠加层(鼠标悬停):

<div id="one-third">
 <div class="over_menu">Text</div>
 <div class="menu_bg"><img src="one.jpg" class="resp-img"></div>
</div>

CSS

.one-third { width: 33.3333%; }
.menu_bg img { width: 100%; height: auto; }
.menu_bg { position:relative; width: 100%; }
.over_menu { position: absolute; z-index:2; background-color:rgba(0,0,0,0.5); color: #FFFFFF; height: 100%; }

不幸的是“over_menu”的高度太大，它显示到整个页面的其余部分。我还能如何解决这个问题？

Answer 1

将 position: relative; 给父级，使其边界在其中:

.one-third { width: 33.3333%; position: relative; }