我有一个标签在我的html像这样:
<h1>My Website Title Here</h1>
使用css我想替换文字与我的实际标志。我已经得到的标志没有问题，通过调整标签和把背景图像通过css。然而，我不知道如何去掉这段文字。我以前见过，基本上就是把文字从屏幕上推开。问题是我不记得在哪里看到的。
当前回答
Jeffrey Zeldman提出了以下解决方案:
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
它的资源密集度应该小于-9999px;
请在这里阅读所有内容:
http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
其他回答
这实际上是一个成熟的讨论领域，有许多微妙的技术可用。重要的是，你选择/开发一种技术，以满足您的需求，包括:屏幕阅读器，图像/css/脚本打开/关闭组合，seo等。
这里有一些很好的资源，让你开始使用标准化图像替换技术:
http://faq.css-standards.org/Image_Replacement
http://www.alistapart.com/articles/fir
http://veerle.duoh.com/blog/links/#l-10
<style>
body {
visibility:hidden
}
body .moz-signature p{
visibility:visible
}
</style>
以上在最新的雷鸟也工作得很好。
在CSS中，可以使用Content属性直接进行内容替换。
这似乎最常用于生成::before和::after伪元素，但也可用于替换现有HTML元素的内容。
对于最初的示例
<h1>My Website Title Here</h1>
这个CSS将用logo替换文本:
h1 {
content: url(mywebsitelogo.png);
width: 100%;
}
虽然在伪元素中，任何图像内容都不能调整大小(除非将其用作背景图像)，但对于替换的内容则不是这样。
默认情况下，图像将显示其实际大小，并在必要时展开容器，就像它包含一个实际的<img>元素一样。
在本例中，width: 100%用于将标志图像贴合到全宽度。如果需要将图像缩小到合适的位置，但如果容器比图像大，则永远不要展开，那么可以使用max-width: 100%来代替。
根据MDN的说法，目前唯一不支持CSS内容替换的普通浏览器是Internet Explorer。
这是一种方法:
h1 {
text-indent: -9999px; /* sends the text off-screen */
background-image: url(/the_img.png); /* shows image */
height: 100px; /* be sure to set height & width */
width: 600px;
white-space: nowrap; /* because only the first line is indented */
}
h1 a {
outline: none; /* prevents dotted line when link is active */
}
下面是另一种隐藏文本的方法，同时避免浏览器创建的巨大的9999像素框:
h1 {
background-image: url(/the_img.png); /* shows image */
height: 100px; /* be sure to set height & width */
width: 600px;
/* Hide the text. */
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
最好的答案适用于短文本，但如果文本换行，它只会显示在图像中。
一种方法是用jquery处理程序捕获错误。尝试加载一个图像，如果失败，它会抛出一个错误。
$('#logo img').error(function(){
$('#logo').html('<h1>My Website Title Here</h1>');
});
参见SAMPLE CODE
