css - リンク内のテキスト画像の置換

Question

一部のナビゲーション テキストを画像に置き換えようとしています。画像を背景として適用しましたが、 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/

Answer 1

要素を作成aしinline-block、text-indentそれらに影響を与えます。

更新された例はこちら

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

ドキュメントによると、要素にtext-indent適用されます。blockアンカー要素はinlineデフォルトです。それらを作成すると、inline-block基本的にこれが修正されます。

Answer 2

使用できます:color:transparent;テキストを透明にします。