Question

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

Answer 1

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

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

<击>

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

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

更新：好像大多数浏览器都不支持图片上的:before或: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>

这样你就可以使用标题attr。

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

在图像上方有图像标题文本

2 个答案: