javascript - 在另一个 span 标签内的图像底部插入 span

Question

我正在尽力在图像中插入 span 标签标题。

两者都在段落和 span 标签内。

如何让 lorem ipsum 文本作为标题出现在图像的底部？？

<p style="text-align: justify;">
 <span style="color: #000000;"> 
  <img class="aligncenter size-full wp-image-8072" width="1200" height="1750" src="https://static.groupon.sg/83/75/1373877177583.jpg" scale="0">
  <span style="display: inline-block;vertical-align:bottom;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
 </span>
</span>
</p>

Answer 1

既然你已经指定你不能改变 HTML 这将是最好的选择。您可以只更改 CSS，使 span 的行为类似于具有相对位置的 div，然后使用 z-indexing 将带有标题的 span 标签堆叠在 img 上。

CSS

p span{
  display:inline-block;
  position: relative;
}
p span img{
  width: 300px;
  height: auto;
}
p span span{
  position: absolute;
  padding: 10px;
  z-index: 10;
  left:0;
  bottom:0;
  background: rgba(255,255,255,.7);
}

Example JSFiddle