如何使用HTML，CSS在圖像內疊加圖像

Question

是否可以在<img>內疊加圖像和文本？ 看起來類似於下圖。 我正在使用Bootstrap

這就是我試圖做到的：

html

<div class="form-group">
    <img id="uploadPreview" class="photo-style">
</div>
<div class="form-group">
    <input type="file" capture="camera" accept="image/*" id="id_photo" 
           name="photo" onchange="PreviewImage();">
</div>

的CSS

.photo-style{
  display: block; 
  width: 100%;
  height: 325px;
  background: lightyellow url(../img/internet-world.png);
  margin-left: auto; 
  margin-right: auto !important;
  border-radius: 4px;
}

Answer 1

您可以只使用ap標記包含文本的div，然后使用CSS定位文本並為div設置正確的高度/寬度，然后在div上應用背景圖像？

Answer 2

使用CSS的position屬性

.parent{
position:relative;
}

.child{
position:absolute;
left:50%;
top:50%
}