如何使用 HTML、CSS 在图像内叠加图像答案

【问题标题】：How to overlay an image inside an image with HTML, CSS如何使用 HTML、CSS 在图像内叠加图像
【发布时间】：2014-12-31 11:52:58
【问题描述】：

是否可以在<img> 内叠加图像和文本？看起来类似于下图。我正在使用引导程序

这就是我正在尝试的方式：

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;
}

【问题讨论】：

标签： html css image twitter-bootstrap

【解决方案1】：

使用css的position属性

.parent{
position:relative;
}

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

【讨论】：

【解决方案2】：

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

【讨论】：