1

我正在尝试用图像替换一些导航文本。我已将图像应用为背景，但 text-indent: -9999px 技巧似乎不起作用。如果我将其应用于保存链接的导航，则链接和图像会完全消失。如果我将其应用于链接本身，则没有任何变化。这种替换是针对经常更新的 Wordpress 插件进行的，因此更改 HTML 代码会令人望而却步。

<nav class="webcomic-above">
<a href="#" class="webcomic-link webcomic1-link first-webcomic-link first-webcomic1-link">&laquo;</a>
<a href="#" class="webcomic-link webcomic1-link previous-webcomic-link previous-webcomic1-link" rel="prev">&lsaquo;</a>
<a href="#" class="webcomic-link webcomic1-link random-webcomic-link random-webcomic1-link">&infin;</a>
<a href="#" class="webcomic-link webcomic1-link next-webcomic-link next-webcomic1-link current-webcomic" rel="next">&rsaquo;</a>
<a href="#" class="webcomic-link webcomic1-link last-webcomic-link last-webcomic1-link current-webcomic">&raquo;</a>


.webcomic-above a.first-webcomic-link{
background: url(http://www.thelionscall.com/wp-content/themes/twentytwelve-tlc-child/images/first-arrow.gif) 0 0 no-repeat;
padding:2px 12px; 
 }
.webcomic-above a.previous-webcomic-link{
background: url(http://www.thelionscall.com/wp-content/themes/twentytwelve-tlc-child/images/previous-arrow.gif) 0 0 no-repeat;
padding:2px 17px;
}
.webcomic-above a.next-webcomic-link {
background: url(http://www.thelionscall.com/wp-content/themes/twentytwelve-tlc-child/images/next-arrow.gif) 0 0 no-repeat;
padding:2px 17px;
}
.webcomic-above a.last-webcomic-link {
background: url(http://www.thelionscall.com/wp-content/themes/twentytwelve-tlc-child/images/last-arrow.gif) 0 0 no-repeat;
padding:2px 12px;
}

http://jsfiddle.net/AHUn4/

4

2 回答 2

1

制作a元素inline-block，然后text-indent会对它们产生影响。

此处更新示例

.webcomic-above a {
    text-indent: -9999px;
    display:inline-block;
}

根据文档，text-indent适用于block元素。锚元素是inline默认的。让他们inline-block基本上解决了这个问题。

于 2014-01-31T18:23:00.447 回答
0

您可以使用：color:transparent;使文本变得透明。

于 2014-01-31T18:22:26.860 回答