我有一个标签在我的html像这样:
<h1>My Website Title Here</h1>
使用css我想替换文字与我的实际标志。我已经得到的标志没有问题,通过调整标签和把背景图像通过css。然而,我不知道如何去掉这段文字。我以前见过,基本上就是把文字从屏幕上推开。问题是我不记得在哪里看到的。
我有一个标签在我的html像这样:
<h1>My Website Title Here</h1>
使用css我想替换文字与我的实际标志。我已经得到的标志没有问题,通过调整标签和把背景图像通过css。然而,我不知道如何去掉这段文字。我以前见过,基本上就是把文字从屏幕上推开。问题是我不记得在哪里看到的。
当前回答
为什么不简单地使用:
h1 { color: transparent; }
其他回答
h1 {
text-indent: -3000px;
line-height: 3000px;
background-image: url(/LOGO.png);
height: 100px; width: 600px; /* height and width are a must */
}
用CSS替换内容
h1{ font-size: 0px;}
h1:after {
content: "new content";
font-size: 15px;
}
使用条件标签不同的浏览器和使用css你必须放置 高度:0px,宽度:0px,你还必须放置字体大小:0px。
答案是使用该属性创建一个span
{显示:没有;}
你可以在这个网站上找到一个例子
这是一种方法:
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;
}