0

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

在此处输入图像描述

这些是文本段，将附加到整个站点的某些图像中。他们都说同样的话，但是图像多种多样，并且来自 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 属性。

4

3 回答 3

0

我会用 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();
});

见小提琴

于 2013-02-09T15:50:20.350 回答
0

发现此线程的任何人的注意事项： 在 Firefox 21 和 IE 9/10 中，这不适用于超大图像。即使全局设置为 max-width: 100%，它也会强制图像为 100%

我必须遵循上面选择的答案，但将 A 标签设置为display:block而不是display:inline-block修复。

于 2013-05-15T19:56:56.603 回答
0

是的，::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;
}

演示

如果您想在 HTML 中添加文本，则必须在链接中放置一个带有它的真实元素（并对它应用相同的规则，但没有content）

于 2013-02-09T15:58:48.620 回答