html - 如何使文本框与图像重叠？

Question

我有以下 HTML 和 CSS:

/*.fullrecent{
  position: relative;
}*/
.recentimage {
  position: relative;
  float: left;
  width: 50%;
  height: 500px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
.whitebox {
  background-color: white;
}

<div class="fullrecent">
  <div class="recentconcert">
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2">
    <div class="whitebox">Hello World!</div>
  </div>
  <div class="recentconcert">
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2">
    <div class="whitebox">Hello World!</div>
  </div>
  <div class="recentconcert">
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2">
    <div class="whitebox">Hello World!</div>
  </div>
  <div class="recentconcert">
    <img class="recentimage" src="https://i.scdn.co/image/8b0172dd313c66872cfd01288cffec136b3e13b2">
    <div class="whitebox">Hello World!</div>
  </div>
</div>

我的目标是用这些图像创建一个 2x2 矩阵，这是我能够做到的，但是当我尝试添加一个附加功能时它被毁了，该功能是添加一个白色矩形，该矩形从左端与每个图像重叠到每张图片底部的右端。有人知道怎么做吗？

Answer 1

这就是我是否理解正确你的问题。关键是要将文本框设置为绝对位置，如果你想让它与图像重叠。

http://jsfiddle.net/592cxncn/

.fullrecent {
    overflow: auto;
}
.recentconcert {
    float: left;
    width: 50%;
    position: relative;
    text-align: center;
}
.recentimage {
    width: 100%;
    height: auto;
    vertical-align: top;
}
.whitebox {
    /* background: white; */
    background: rgba(255,255,255, .75);
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
}

<div class="fullrecent">
    <div class="recentconcert">
        <img class="recentimage" src="//dummyimage.com/500/333"/>
        <div class="whitebox">Hello World!</div>
    </div>
    <div class="recentconcert">
        <img class="recentimage" src="//dummyimage.com/500/666"/>
        <div class="whitebox">Hello World!</div>
    </div>
    <div class="recentconcert">
        <img class="recentimage" src="//dummyimage.com/500/999"/>
        <div class="whitebox">Hello World!</div>
    </div>
    <div class="recentconcert">
        <img class="recentimage" src="//dummyimage.com/500/ccc"/>
        <div class="whitebox">Hello World!</div>
    </div>
</div>