使用css隐藏文本 [英] Hide text using css
问题描述
我在我的html中有这样的标签:
I have a tag in my html like this:
<h1>My Website Title Here</h1>
使用CSS我想用我的实际徽标替换文本。我有标志没有问题,通过调整标签和通过CSS放置背景图像。但是,我不知道如何摆脱文本。我已经看到它之前基本上通过推动文本从屏幕上。问题是我不记得我在哪里看到它。
Using css I want to replace the text with my actual logo. I've got the logo there no problem via resizing the tag and putting a background image in via css. However, I can't figure out how to get rid of the text. I've seen it done before basically by pushing the text off the screen. The problem is I can't remember where I saw it.
推荐答案
这是一种方法:
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 */
}
=http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ =nofollow noreferrer>另一种方式隐藏文字同时避免浏览器将创建的巨大的9999像素框:
Here is another way to hide the text while avoiding the huge 9999 pixel box that the browser will create:
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;
}
这篇关于使用css隐藏文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!