我有一个标签在我的html像这样:
<h1>My Website Title Here</h1>
使用css我想替换文字与我的实际标志。我已经得到的标志没有问题，通过调整标签和把背景图像通过css。然而，我不知道如何去掉这段文字。我以前见过，基本上就是把文字从屏幕上推开。问题是我不记得在哪里看到的。
当前回答
这对我来说适用于span(敲除验证)。
<span class="validationMessage">This field is required.</span>
.validationMessage {
background-image: url('images/exclamation.png');
background-repeat: no-repeat;
margin-left: 5px;
width: 16px;
height: 16px;
vertical-align: top;
/* Hide the text. */
display: inline-block;
overflow: hidden;
font-size: 0px;
}
其他回答
如果我们可以编辑标记，生活就会更简单，只需要删除文本就可以了。但有时标记是由JS代码放置的，或者我们根本不允许编辑它，糟糕的是css变成了我们唯一的武器。
我们不能使用<span>来包装文本并隐藏整个标记。顺便说一下，有些浏览器不仅隐藏带有display的元素:none，而且还禁用其中的组件。
font-size:0px和color:transparent可能都是很好的解决方案，但有些浏览器不理解它们。我们不能依赖他们。
我建议:
h1 {
background-image: url(/LOGO.png); /* Our image */
text-indent: -3000px; /* Send text out of viewable area */
height: 100px; width: 600px; /* height and width are a must, agree */
overflow:hidden; /* make sure our size is respected */
}
使用overflow:hidden强制我们的宽度和高度。一些浏览器(不会命名它们…)IE)可以将width和height读为min-width和min-height。我想防止箱子变大。
使用条件标签不同的浏览器和使用css你必须放置 高度:0px，宽度:0px，你还必须放置字体大小:0px。
你可以通过添加这个属性来隐藏你的文本:
font-size: 0 !important;
为什么不用:
<li><a href="#">bla</a></li>
a {
opacity: 0.0;
font-size: 1px;
}
li {
background-image: url('test.jpg');
}
如果你没有任何span或div元素，它可以完美地用于链接。
h1{
background:url("../images/logo.png") no-repeat;
height:180px;
width:200px;
display:inline-block;
font-size:0px !important;
text-intent:-9999999px !important;
color:transparent !important;
}
