最佳图像替换技术

Question

在CSS中进行图像替换的最佳(如跨浏览器)技术是什么？我正在使用精灵来做我的导航,但我希望标记保持SEO友好.鉴于以下HTML结构......

 <div id="menu">
   <ul>
     <li><a href="#">Test</a></li>
     <li><a href="#">Tester</a></li>
     <li><a href="#">Testing Testing</a></li>
   </ul>
 </div>

使用CSS仅使用背景图像替换文本的最佳方法是什么？

我目前正在使用这个......

text-indent: -9999px;

但是,它在启用CSS时失败,并且关闭了图像.

Answer 1

如果这是 html：

<div id="menu">
  <ul>
    <li><a href="#" id="home">Home</a></li>
    <li><a href="#" id="about">About</a></li>
    <li><a href="#" id="contact">Contact</a></li>
  </ul>
</div>

这是CSS：

#menu ul li a{
  display: block;
  overflow: hidden;
  text-indent: -9999px;
  background: transparent url(yourpicture.png) no-repeat 0 0;
  width: 100px;
}
#home{
  background-position: 0px 0px
}
#about{
  background-position: -100px 0px
}
#contact{
  background-position: -200px 0px
}

图像的宽度将为 300 像素，每个选项卡的宽度将为 100 像素。