我正在使用 wordpress 生成带有 anchor 标记的 ul,并且我为每个元素都有单独的类,我使用以下代码为每个 anchor 标记设置背景图片
我想做的是隐藏列表项 anchor 的文本,同时仍为其设置背景图像。
.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>
最佳答案
经典的 hack 是:
a { text-indent: -9999px; }
关于这个特定解决方案的问题对 SEO 来说不太好。如果你想要更可靠的东西,你可以在白色背景上使用白色文本,或者其他 hack:
a { font-size: 0; }
关于css - 在设置背景图片时隐藏 anchor 标签文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9660727/