Question

我正在尽力在图片中插入范围标记标题。

两者都在段落和范围标记内。

如何将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

＆＃13;

.imgCaption{
  display: inline-block;      /* Needed since It's a SPAN */
  position: relative;         /* to contain the absolute caption */
  text-align: justify;    
  width: 33.333%;             /* Demo only */
}
.imgCaption img{
  vertical-align:top;         /* Remove gaps caused by inline elements */
  width: 100%;                /* Adjust to parent */
}
.imgCaption > span{
  position: absolute;          /* We want it at the bottom so, needed */
  color: #fff;                 /* Always use bright colors for overlay captions */
  background: rgba(0,0,0,0.5); /* Optional */
  bottom:0; left:0; right:0;   /* Bottom, and enlarge to full */
  padding:24px;                /* Make the text breathe */
}

＆＃13;

<span class="imgCaption">
	<img src="https://static.groupon.sg/83/75/1373877177583.jpg" alt="pasta">
	<span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</span>
</span>

＆＃13;

回顾一下：不要使用内联样式！让你的生活更轻松！
在您要定位的元素中添加类并使用样式表。

Answer 2

由于您已指定您无法更改HTML ，这将是最佳选择。您可以更改CSS以使跨度的行为类似于具有相对位置的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

在另一个span标记内的图像底部插入span

2 个答案: