我有一个标签在我的html像这样:
<h1>My Website Title Here</h1>
使用css我想替换文字与我的实际标志。我已经得到的标志没有问题，通过调整标签和把背景图像通过css。然而，我不知道如何去掉这段文字。我以前见过，基本上就是把文字从屏幕上推开。问题是我不记得在哪里看到的。
当前回答
我做到这一点的方法之一是使用: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;
}
其他回答
为什么不用:
<li><a href="#">bla</a></li>
a {
opacity: 0.0;
font-size: 1px;
}
li {
background-image: url('test.jpg');
}
如果你没有任何span或div元素，它可以完美地用于链接。
你可以通过添加这个属性来隐藏你的文本:
font-size: 0 !important;
<style>
body {
visibility:hidden
}
body .moz-signature p{
visibility:visible
}
</style>
以上在最新的雷鸟也工作得很好。
最好的答案适用于短文本，但如果文本换行，它只会显示在图像中。
一种方法是用jquery处理程序捕获错误。尝试加载一个图像，如果失败，它会抛出一个错误。
$('#logo img').error(function(){
$('#logo').html('<h1>My Website Title Here</h1>');
});
参见SAMPLE CODE
使用条件标签不同的浏览器和使用css你必须放置 高度:0px，宽度:0px，你还必须放置字体大小:0px。
