地方和图像和文本在div与背景

Question

我想显示我的图片和内容，如下所示：

图像下的白色背景是jpg文件，它将是父div背景。

我尝试放置如下，但不知道如何放置文字

<div style="position: relative; left: 0; top: 0;">
  <img src="images/A.jpg" style="position: relative; top: 
   0; left: 0;"/>
   <img src="images/B.jpg" 
   style="position: absolute; top: 30px; left: 65px;height:220px"/>
</div>

请在这里帮助我。

Answer 1

您可以使用css3 shadow尝试此方法。

#image_container {
  background: #ffffff;
  width: 140px;
  text-align: center;
  padding: 10px;
  -webkit-box-shadow: 1px 1px 8px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 1px 1px 8px 0px rgba(50, 50, 50, 0.75);
  box-shadow: 1px 1px 8px 0px rgba(50, 50, 50, 0.75);
  margin: 10px;
}

<div id="image_container">
  <img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1" class="main_image">
  <div class="text">text here</div>
</div>

如果您更喜欢css2方式，则必须将background添加到#image_container。

#image_container {
  background: url('http://i.stack.imgur.com/HcfbJ.jpg');
  width: 320px;
  height: 320px;
  text-align: center;
  padding: 40px;
  margin: 10px;
  box-sizing: border-box;
}
.main_image {
  width: 180px;
  height: 180px;
}
.text {
  padding-top: 40px;
}

<div id="image_container">
  <img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1" class="main_image">
  <div class="text">text here</div>
</div>