我有一个标签在我的html像这样:
<h1>My Website Title Here</h1>
使用css我想替换文字与我的实际标志。我已经得到的标志没有问题，通过调整标签和把背景图像通过css。然而，我不知道如何去掉这段文字。我以前见过，基本上就是把文字从屏幕上推开。问题是我不记得在哪里看到的。
当前回答
这是一种方法:
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;
}
其他回答
为什么不用:
<li><a href="#">bla</a></li>
a {
opacity: 0.0;
font-size: 1px;
}
li {
background-image: url('test.jpg');
}
如果你没有任何span或div元素，它可以完美地用于链接。
h1 {
text-indent: -3000px;
line-height: 3000px;
background-image: url(/LOGO.png);
height: 100px; width: 600px; /* height and width are a must */
}
这实际上是一个成熟的讨论领域，有许多微妙的技术可用。重要的是，你选择/开发一种技术，以满足您的需求，包括:屏幕阅读器，图像/css/脚本打开/关闭组合，seo等。
这里有一些很好的资源，让你开始使用标准化图像替换技术:
http://faq.css-standards.org/Image_Replacement
http://www.alistapart.com/articles/fir
http://veerle.duoh.com/blog/links/#l-10
跨浏览器最友好的方式是将HTML编写为
<h1><span>Website Title</span></h1>
然后使用CSS隐藏跨度和替换图像
h1 {background:url(/nicetitle.png);}
h1 span {display:none;}
如果你可以使用CSS2，那么还有一些更好的方法来使用内容属性，但不幸的是，web还没有100%做到这一点。
我做到这一点的方法之一是使用:before或:after。我已经使用这种方法好几年了，尤其适用于字形矢量图标。
h1 {
position: relative;
text-indent: -9999px; /* sends the text off-screen */
}
h1:before {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: block;
width: 600px;
height: 100px;
content: ' ';
background: transparent url(/the_img.png) 0 0 no-repeat;
}
