可以使用css伪内容添加图像标题吗？

Question

我正在寻找最简单，最易维护的方法：

这些文本标题将附加到整个网站的某些图像中。他们都说同样的事情，但图像是多种多样的，来自CMS。

我知道如何将图像设置为相对位置以及在绝对定位的子div中使用“有更好的方法”的div。

然而，由于这需要将HTML添加到每个获得此处理的图像中，我一直在寻找一种使用：before伪元素的css类的方法。到目前为止，将类应用于包装链接无效：

<a href="#" class="tabw"><img src="imagepath" alt=""></a>

.tabw img:before {
content: 'theres a better way';
color: red;
font-size: 18px;
}

这种事情有可能吗？在CSS中完成所有操作意味着我所要做的就是让CMS在需要时应用class属性。

Answer 1

我会用jQuery这样做：

<强> HTML

<div class="thumb">
    <img src="http://www.zupmage.eu/up/NvBtxn7LHl.png" alt="cover"/>
    <div class="caption">My caption</div>
</div>

<强>的CSS

.thumb {
    position:relative;
    width:230px;
    height:230px;
}

.thumb img {
    max-width:100%;
}

.thumb .caption {
    display:none;
    position:absolute;
    top:0;
    height:20px;
    line-height:20px;
    width:100%;
    text-align:center;
    background:rgba(255,255,255,0.5);
}

<强> JQuery的

$('.thumb').hover(function() {
    $(this).find('.caption').fadeIn();
}, function() {
    $(this).find('.caption').hide();
});

请参阅fiddle

Answer 2

是的，::before和::after不适用于图片。但是你可以将它们应用于包装器 链接：

a{
  position: relative;
}

a, a > img{
  display:inline-block;
}

a::before{
  content: 'theres a better way';
  position: absolute;    
  left: 0;
  top: 0;     
  width: 80%;
  height: 20px;
  left: 10%;  
  background: #000;
  opacity: 0.4;      
  color: red;
  font-size: 18px;
}

demo

如果您希望在HTML中添加文字，则必须在链接中添加一个真实元素（并对其应用相同的规则，但不包含content）

Answer 3

注意任何人发现此线程：在Firefox 21和IE 9/10中，这对于超大图像无法正常工作。即使全局设置为max-width：100％

，它也会将图像强制为100％

我必须按照上面选择的答案但将A标记设置为display:block而不是display:inline-block来修复。