在設置背景圖片時隱藏錨點標記文本

我正在使用wordpress生成具有錨點標記的ul，並且我爲每個項目設置了單獨的類，我使用以下代碼爲每個錨點標記設置了背景圖片在設置背景圖片時隱藏錨點標記文本

我所想要做的是隱藏列表項的錨文本，同時還設置背景圖片吧。

.shop a { 
    background-image:url('../images/shopFull.png'); 
    width:209px; 
    height: 74px; 
    display:block; 
}

這裏是輸出HTML

<nav class="menu-main-navigation-container"><ul id="menu-main-navigation" class="nav-bar"><li id="menu-item-22" class="shop menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://localhost:8888/goodMorningMoon/shop/">Shop</a></li> 
<li id="menu-item-21" class="services menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://localhost:8888/goodMorningMoon/services/">Services</a></li> 
<li id="menu-item-23" class="blog menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="http://localhost:8888/goodMorningMoon/blog/">blog</a></li> 
<li id="menu-item-20" class="contact menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://localhost:8888/goodMorningMoon/contact/">Contact</a></li> 
</ul></nav>

來源

2012-03-12 Cool Guy Yo

使用text-indent^{MDN docs}和overflow:hidden。

shop a { 
    background-image:url('../images/shopFull.png'); 
    width:209px; 
    height: 74px; 
    display:block; 

    text-indent:-9999px; 
    overflow:hidden; 
}

來源

2012-03-12 01:40:04

這個經典的黑客是：

a { text-indent: -9999px; }

有關此特定解決方案的問題是不是SEO太好。如果你想要的東西更可靠，你可以使用白字白backgorund，或該其他黑客：

a { font-size: 0; }

來源

2012-03-12 01:43:40 elclanrs

在設置背景圖片時隱藏錨點標記文本

回答

相關問題