像这样的东西?
.wrapper { height: auto; height: 280px; display: inline-block; } .image_holder { position: relative; float: left; margin-right: 10px; width: 180px; background-color: #ccecec; display: block; min-height: 100%; } .overlay { position: absolute; top: 0; text-align: center; /*background-color: rgba(34, 70, 118, 0.7);*/ width: 100%; height: 100%; } p { position: absolute; bottom: 0; margin: 0 auto 0; padding: 2px 0; display: inline-block; background-color: #FE9D86; width: 100%; text-align: center; color: #000; } img { display: block; margin: 0 auto; position: absolute; left: 0; right: 0; top: 90px; border-radius: 8px; }
<div class="wrapper"> <div class="image_holder"> <img src="https://www.w3schools.com/howto/img_paris.jpg" alt="Snow" style="width:40%;"> <div class="overlay"> <pre>Content over image</pre> </div> <p>Content</p> </div> <div class="image_holder"> <div class="overlay"> <pre>NHS SUB</pre> </div> <p>Content</p> </div> </div>