使用css隐藏文本

我在我的html里有一个这样的标签。

<h1>My Website Title Here</h1>

我想用css将文本替换成我的实际标志。我通过调整标签的大小,并通过css放上一个背景图片,就可以把logo放在那里,这没有问题。但是,我不知道如何去掉这些文字。我以前见过这样的做法,基本上是把文字推到屏幕之外。问题是我不记得我在哪里看到过。

对跨浏览器最友好的方法是将HTML写成

<h1><span>Website Title</span></h1>

然后用CSS来隐藏跨度,并替换图片

h1 {background:url(/nicetitle.png);}
h1 span {display:none;}

如果你能使用CSS2,那么还有一些更好的方法,使用content属性,但不幸的是,网络还没有100%达到这个要求。

评论(4)

你可以使用css的background-image属性和z-index来确保图像保持在文本的前面。

评论(0)

答案是创建一个跨度,其属性为

{display:none;}

你可以在这个网站找到一个例子

评论(1)