在设置背景图像时隐藏锚标记文本答案

【问题标题】：Hide a anchor tags text while setting a background image在设置背景图像时隐藏锚标记文本
【发布时间】：2012-03-28 11:28:36
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： css wordpress menu hide

【解决方案1】：

这方面的经典技巧是：

a { text-indent: -9999px; }

这个特定解决方案的问题对 SEO 来说不是太好。如果你想要更可靠的东西，你可以在白色背景上使用白色文本，或者其他 hack：

a { font-size: 0; }

【讨论】：

【解决方案2】：

使用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;
}

【讨论】：