我的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;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句