您知道 Google、Yahoo 和 MSN 等搜索引擎主要查看页面的文本内容来对其进行索引并确定其与搜索的相关性。 您也知道在 HTML 中使用<h1> 等标题标签很重要，因为搜索引擎重视组织的、分段的内容。 但是，如果您不想在网站上使用又大又丑的文本节标题怎么办？ 您是否更愿意使用您自己的自定义图形？ 当然可以，但您不想为了<img> 而跳过<h1>，并失去所有搜索引擎友好性。 您不必这样做！
现在最流行的技巧之一是使用一个类来用图像替换标题文本。 像往常一样使用您的标题标签，只是给它一个唯一的类名：<h1 class="headerReplacement">Section Header</h1> 在您的 CSS 中，像这样定义该类
.headerReplacement {
text-indent: -9999px;
width: 600px;
height: 100px;
background: url(/path/to/your/image.jpg) #cccccc no-repeat;
}这应该将您漂亮的新自定义图像直接放在那个又丑又老的文本标题所在的位置，而且不会损失搜索引擎的可读性。 此技术还允许您的页面良好降级，适用于使用屏幕阅读器或在关闭图像和/或 CSS 的情况下浏览网页的用户。
好主意；但是，当用户通过按住 [CTRL] 并按下 [+] 或 [-] 来调整页面大小时，背景不会调整大小，它会保持相同的大小，如果使用“em”而不是“px”，它至少不会破坏您的布局。
我想到这个
<div id=”content_title”>
<h1><img src=”http://my.website.com/templates/title.png.php?text=[title]” alt=”[title]” style=”width:55em;height:2.7em” />[title]</h1>
</div>
CSS
#content_title h1 {
padding-top: 1em;
margin: 0px;
}
#content_title {
margin-bottom: 1em;
overflow: hidden;
height: 3.7em;
border-bottom: 0.1em dashed #369;
}
图像放在首位，假设图像将与“content_title”div 的大小完全一致，而且由于 overflow:hidden，图像后面的实际文本永远不会显示，除非访问者无法在其浏览器中显示图片（例如搜索引擎或文本浏览器）。 如果由于任何原因，图像加载失败（例如生成图像的脚本中存在错误、连接错误等），则 alt 文本将显示出来，而且由于声明了图像的大小，浏览器应该屏蔽该区域（防止图像旁边的文本显示）。
在 Opera7、FF2、IE7 中测试
嗨 Paul,
这很酷。 我认为我以前没见过这种方法。 有一个更深入的 CSS 图片替换调查 这里。
哦，对了，*砰* 我当然没有在 IE6 中测试过。
除了高度之外，#content_title 也需要设置宽度。 在我的情况下，它是 55em（标题图像的宽度）。 否则，您的布局可能会在 IE6 中崩溃。
我理解使用这种方法的原因，但它似乎会阻止设计师将徽标放在标题内作为将用户带回主页的设备。 或者徽标图像仍然可以与 H1 和 .headerReplacement 一起放在标题内吗？
查看 http://facelift.mawhorter.net/
我不确定是否建议替换网站上的所有文本，但它可以让你自动替换标题等... 很酷。
text-indent: -9999px 应该是 text-indent: -9999px;