在 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 打开和图像关闭时失败。
2008 年，谷歌在 An Event Apart 上的演讲明确表示，有效的图片替换不会受到谷歌的惩罚。请参阅 Mezzoblue 的帖子
基本上，只要您替换文本的图像中包含相同的文本，它就会被认为是有效的，并且不会试图欺骗搜索引擎。他们如何确定图像是否有效？我不知道... OCR？人工审核？
至于 CSS on/images off，没有完美的解决方案，它们都需要额外的非语义标记。请参阅 beggs 在不同技术上发布的 css-tricks 链接。我个人并不介意使用 CSS 浏览但没有图像的极少数用户。
你的选择很简单。额外的标记，或者不关心 css on/images off。
如果这是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 像素宽。
背景图像通常应用于<a>链接，为整个可点击区域提供图像。要隐藏文本，您可以对 使用非常大的负值text-indent。
我刚想出这个，它似乎适用于所有现代浏览器，我只是在（IE8/兼容性、Chrome、Safari、Moz）上对其进行了测试
HTML
<img id="my_image" alt="my text" src="images/small_transparent.gif" />
CSS
#my_image{
background-image:url('images/my_image.png');
width:100px;
height:100px;}
专业人士：
我能想到的最大缺点是 css off/images on 情况，因为你只会发送一个透明的 gif。
可能可以编写一些 javascript 来帮助解决这个问题，用它们的背景图像 css 属性替换所有图像源。但这只有在浏览器仍然将 css 属性附加到元素然后忽略它们时才有效。我不知道是不是这样，我得测试一下。您还想开发一个基于 javascript 的测试来查看是否将 css 应用于页面（可能检查某些测试元素的位置）。
顺便说一句，我想知道，谁使用没有样式表的图像？某种手机什么的？
编辑：
根据下面的评论...内联样式 hrm...也许我应该只制作一个 php 辅助函数，例如<?php echo css_image('image_id','my text','image_url');?>生成一些这样的代码：
HTML
<div id="image_id" style="background-image:url('image_url')" class="image">
<img src="image_url" class="alt_text" alt="my text" />
<p>my text</p>
</div><!--/#my_image-->
然后在样式表中附加一些 CSS
#image_id{width:*image width*;height:*image height*}
.alt_text{position:absolute;top:0px;left:0px}
.image{display:block;background-position:left top}
.image p{position:absolute;left:-9999em}
这是我正在使用的一种较旧的技术，但不确定我在哪里找到它。它适用于 CSS on/images off、CSS off/images on、CSS on/images on。
如果关闭 CSS/图像的用户访问，他们会看到双倍的文本。如果搜索引擎蜘蛛访问，他们会看到替代文本和常规文本，智能蜘蛛可以很容易地识别出它是什么，这是一种无辜的图像替换技术。
因此，这种技术对于屏幕阅读器来说是最糟糕的，因为会读取 alt 文本，但这些用户应该能够跳到下一段，这就是我坚持<p></p>“我的文本”的原因。
其他所有关闭 CSS 和图像的人都是某种机器人，对吧？
CSS Tricks 在这里有关于该主题的最详细的帖子之一
他们展示了各种技术。解决您的 css 开启和图像关闭问题的方法是：
HTML：
CSS Tricks 在这里有关于该主题的最详细的页面之一
他们展示了各种技术。解决 css 开启和图像关闭问题的方法是 #8：
HTML：
<div id="menu">
<ul>
<li><a href="#"><span></span>Test</a></li>
<li><a href="#"><span></span>Tester</a></li>
</ul>
</div>
CSS：
#menu a {
width: 350px; height: 75px; /*your values here*/
position: relative;
}
#menu a span {
background: url("images/li.jpg"); /*your image here*/
position: absolute;
width: 100%;
height: 100%;
}
编辑：将代码更新为提供的示例。
PS：我没有测试上面的代码。
这是我用来用图像替换徽标文本的代码，同时将文本保留在代码中但不向用户显示（这是 Google 批准的）。在此处查看完整的示例：
http://discretiondesigns.com/overflow/imagereplacement/
这是完整的代码（图片可以在上面的链接中找到 - 图片可以有不同的大小 - 整个图片是可点击的，并且在悬停时会发生变化）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Replacement</title>
<style type="text/css">
<!--
#menu li { list-style: none; }
#menu #a { font: .9em Verdana, Arial, Helvetica, sans-serif; color: #E9E7E0; height: 20px; width: 100px; padding-top: 8px; padding-left: 8px; float: left; }
#menu #a a { background: url(http://discretiondesigns.com/overflow/imagereplacement/a_off.gif) no-repeat left top; height: 20px; width: 100px; display: block; }
#menu #a a:hover { background: url(http://discretiondesigns.com/overflow/imagereplacement/a_on.gif); }
#menu #a span { display: none; }
#menu #b { font: .9em Verdana, Arial, Helvetica, sans-serif; color: #E9E7E0; height: 20px; width: 100px; padding-top: 8px; padding-left: 8px; float: left; }
#menu #b a { background: url(http://discretiondesigns.com/overflow/imagereplacement/b_off.gif) no-repeat left top; height: 20px; width: 100px; display: block; }
#menu #b a:hover { background: url(http://discretiondesigns.com/overflow/imagereplacement/b_on.gif); }
#menu #b span { display: none; }
#menu #c { font: .9em Verdana, Arial, Helvetica, sans-serif; color: #E9E7E0; height: 20px; width: 100px; padding-top: 8px; padding-left: 8px; float: left; }
#menu #c a { background: url(http://discretiondesigns.com/overflow/imagereplacement/c_off.gif) no-repeat left top; height: 20px; width: 100px; display: block; }
#menu #c a:hover { background: url(http://discretiondesigns.com/overflow/imagereplacement/c_on.gif); }
#menu #c span { display: none; }
-->
</style>
</head>
<body>
<div id="menu">
<ul>
<li id="a"><a href="#" title="This is A!"><span>Nav A</span></a></li>
<li id="b"><a href="#" title="This is B!"><span>Nav B</span></a></li>
<li id="c"><a href="#" title="This is C!"><span>Nav C</span></a></li>
</ul>
</div>
</body>
</html>
#menu ul li a {
display: block;
background-image: url(images/someimage.png);
text-indent: -9000px;
width: 454px;
height: 64px;
}
display:block 很重要，否则您的宽度和高度可能看起来不正确。
无论 css/images 的设置如何，这都被吹捧为有效：
CSS：
#menu ul li a{
display: block;
background-image: url(http://example.com/sprite.png);
width: 100px;
height: 50px;
}
#a {
background-position: <offset for sprite>;
}
#b {
background-position: <offset for sprite>;
}
#c {
background-position: <offset for sprite>;
}
HTML：
<div id="menu">
<ul>
<li id="a"><a href="#" title="Test">Test</a></li>
<li id="b"><a href="#" title="Tester">Tester</a></li>
<li id="c"><a href="#" title="Testing Testing">Testing Testing</a></li>
</ul>
</div>
编辑：将链接文本添加回......因为它被错过了。:-)