jquery - 在图像顶部有图像标题文本

Question

图像具有标题属性。但是是否可以在图像上方显示该标题？也就是说，没有额外的元素？

Answer 1

你可以在 CSS 中做这样的事情：

img:before {
   content: attr(title);
   display: block;
}

或者，如果您可以使用 jQuery - jsFiddle：

$('img').before(function(){ return this.title });

更新：似乎大多数浏览器不支持图像上的:beforeor:after伪标签。所以你最好的选择是使用 jQuery。

Answer 2

你可以像这个例子一样使用 CSS。

<style type="text/css">

  a.hovertext {
    position: relative;
    width: 500px;
    text-decoration: none !important;
    text-align: center;
  }
  a.hovertext:after {
    content: attr(title);
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0.5em 20px;
    width: 460px;
    background: rgba(0,0,0,0.8);
    text-decoration: none !important;
    color: #fff;
    opacity: 0;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
  }
  a.hovertext:hover:after, a.hovertext:focus:after {
    opacity: 1.0;
  }

</style>

<p><a class="hovertext" href="#" title="The title attribute of the link appears over the image on hover"><img src="/images/css_textoverimage.jpg" width="500" height="309" border="0" alt=""></a></p>

Whit this 你可以使用标题attr。

更好的解释在这里：http ://www.the-art-of-web.com/css/textoverimage/#.UjzkuWTN63M