如何使用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

你可以用包含文本的p标签创建一个div，然后用css定位文本并给你的div正确的高度/宽度并在div上应用背景图像？

Answer 2

使用css的position属性

.parent{
position:relative;
}

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