How to overlay an image inside an image with HTML, CSS

Question

Is it possible to overlay an image and a text inside of an <img> ? To look something similar like the image below. I'm using Bootstrap

this is how I'm trying to do it:

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

use position property of css

.parent{
position:relative;
}

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