我有一个标签在我的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/
其他回答
在元素中使用0值的字体大小和行高对我来说是有用的:
<style>
.text {
display: block;
width: 200px;
height: 200px;
font-size: 0;
line-height: 0;
}
</style>
<span class="text">
Invisible Text
</span>
跨浏览器最友好的方式是将HTML编写为
<h1><span>Website Title</span></h1>
然后使用CSS隐藏跨度和替换图像
h1 {background:url(/nicetitle.png);}
h1 span {display:none;}
如果你可以使用CSS2，那么还有一些更好的方法来使用内容属性，但不幸的是，web还没有100%做到这一点。
不要使用{display:none;它使内容无法访问。您希望屏幕阅读器看到您的内容，并通过将文本替换为图像(如徽标)来视觉化它。text-indent: -999px;或者类似的方法，文本仍然在那里——只是没有视觉上的存在。使用display:none，文本就消失了。
为什么不用:
<li><a href="#">bla</a></li>
a {
opacity: 0.0;
font-size: 1px;
}
li {
background-image: url('test.jpg');
}
如果你没有任何span或div元素，它可以完美地用于链接。
如果只是为了让元素内部的文本不可见，可以使用rgba值将color属性设置为不透明度为0，例如color:rgba(0,0,0,0);干净简单。
