在图像上显示图像标题答案

【问题标题】：Display Image title over image在图像上显示图像标题
【发布时间】：2019-02-10 16:46:16
【问题描述】：

如何在图片上显示图片标题。代码如下所示：

<img typeof="foaf:Image" src="galerija
/public/12191388_934693563270076_3046172221632898681_o.jpg?itok=IHAa2J2n" width="900" height="600" 
alt="" title="Foto: Edis Škulj/fkmladost.ba">

我想在图片上显示这个Foto: Edis Škulj/fkmladost.ba

【问题讨论】：

当你将鼠标悬停在它上面时应该可以工作。您希望它永久覆盖图像吗？ jsfiddle.net/partypete25/fnb71uLu
是的，我想要我的图片

标签： jquery html image css

【解决方案1】：

我认为您正在寻找这样的东西:)

.wrapper {
  height: 400px;
  width: 400px;
  position: relative;
}
img {
  position: absolute;
  left: 0;
  top: 0;
}
span {
  position: absolute;
  color: white;
  font-size: 30px;
  font-weight: bold;
  left: 150px;
  top: 350px;
}

<div class="wrapper">
  <img typeof="foaf:Image" src="http://www.real-world-physics-problems.com/images/hot_air_balloon_pic_edit.jpg" alt="" title="Foto: Edis Škulj/fkmladost.ba">
  <span>Foto: Edis Škulj/fkmladost.ba</span>
</div>

【讨论】：

这个工作就像一个魅力。我想要这种解决方案

【解决方案2】：

你可以像这样使用 JQuery https://jsfiddle.net/a1gqm3nj/

var title = $('img').attr('title');
$('img').before(title);

HTML

<img typeof="foaf:Image" src="http://placehold.it/900x600" width="900" height="600" alt="" title="Foto: Edis Škulj/fkmladost.ba">

【讨论】：

【解决方案3】：

尝试一次

&lt;img src="http://www.planwallpaper.com/static/images/4-Nature-Wallpapers-2014-1_ukaavUI.jpg" title="this is img Title"/&gt;

【讨论】：