如何在大小不同的多张图片上叠加文本？CSS

Question

我是一个可以帮助翻译文字的助手。

我有一个客户希望在所有已售出的图片的顶部放置一个已售出的文本，并将其放置在每个图像的左下角。我已经实现了这个功能，但问题是一些图片的尺寸不同。是否有一种“一型适用于所有”的CSS类，可以正确定位文本，而不考虑图片的大小？ 代码：

.sold-overlay {
  position: absolute; 
  top: 80%; 
  left: 59%; 
  width: 25%;
  border: 1px solid #e60000;
  color: white;
  font-size: 50%;
  background-color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-lg-8 col-lg-offset-2">
      <div class="modal-body">
        <h2>I Am Travon Martin</h2>                          
        <img class="img-responsive img-centered" src="img/portfolio/sold/img-6847.jpg" alt="">
        <h2 class="sold-overlay">Sold</h2>
        <p>I'm sorry, this artwork has been sold to a happy customer.</p>                           
        <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
      </div>
    </div>
  </div>
</div>

- user1656528

---

使用 bottom 属性代替 top。如果你想在所有图像上将文本定位在同一位置，请使用 px 单位而非百分比。 - Ricky Ruiz

Answer 1

我将红色的“售出”横幅定位在左下角，并将图像大小设置为100％，以便始终填充其列/响应式容器。

.sold-overlay {
position: absolute; 
bottom: 0; 
left: 0; 
width: 25%;
border: 1px solid #e60000;
color: white;
font-size: 50%;
background-color: red;
}

.relative {
position: relative;  
}

.relative img {
  display: block;
  width: 100%;
  }

<div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">
                        <div class="modal-body">
                            <h2>I Am Travon Martin</h2>                      
                          <div class="relative">
                            <img class="img-responsive img-centered" src="http://placehold.it/200x100" alt="">
                            <div class="sold-overlay"><h2>Sold</h2></div>
                            </div>
                            
                            <p>I'm sorry, this artwork has been sold to a happy customer.</p>                           
                           
                        </div>
                       <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
                    </div>
                </div>
            </div>

- Nathaniel Flick

---

非常感谢你，Nathaniel！它完美地解决了我的问题！我整天都在寻找这个答案，但一无所获。我很高兴这里的人们愿意提供帮助。 - user1656528