Question

我正在尝试用图片替换一些导航文本。我已将图像应用为背景，但文本缩进：-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/

Answer 1

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

UPDATED EXAMPLE HERE

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

According to documentation，text-indent适用于block元素。默认情况下，锚元素为inline。让他们inline-block基本上解决了这个问题。

Answer 2

您可以使用：color:transparent;使文字透明。

链接中的文本图像替换

2 个答案: