css - 最佳图像替换技术

Question

在 CSS 中进行图像替换的最佳(如跨浏览器)技术是什么？我正在使用 sprites做我的导航，但我希望标记保持 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 像素宽。