我有一个标签在我的html像这样:
<h1>My Website Title Here</h1>
使用css我想替换文字与我的实际标志。我已经得到的标志没有问题，通过调整标签和把背景图像通过css。然而，我不知道如何去掉这段文字。我以前见过，基本上就是把文字从屏幕上推开。问题是我不记得在哪里看到的。
当前回答
试试这段代码来缩短和隐藏文本
.hidetxt { 宽度:346 px; 显示:表标题; 空白:nowrap;} 溢出:隐藏; 文本溢出:省略; 光标:非放; ｝ .hidetxt:{徘徊 可见性:隐藏; ｝ < div class = " hidetxt”> Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时</p> < / div >
或者在你的CSS类中隐藏使用。hidext{可见性:隐藏;｝
其他回答
这是一种方法:
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;
}
你可以使用CSS的background-image属性和z-index来确保图像保持在文本的前面。
h1 {
text-indent: -3000px;
line-height: 3000px;
background-image: url(/LOGO.png);
height: 100px; width: 600px; /* height and width are a must */
}
Jeffrey Zeldman提出了以下解决方案:
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
它的资源密集度应该小于-9999px;
请在这里阅读所有内容:
http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
我通常使用:
span.hide
{
position:fixed;
right:-5000px;
}
