我有一个标签在我的html像这样:
<h1>My Website Title Here</h1>
使用css我想替换文字与我的实际标志。我已经得到的标志没有问题，通过调整标签和把背景图像通过css。然而，我不知道如何去掉这段文字。我以前见过，基本上就是把文字从屏幕上推开。问题是我不记得在哪里看到的。
当前回答
用CSS替换内容
h1{ font-size: 0px;}
h1:after {
content: "new content";
font-size: 15px;
}
其他回答
隐藏文本与可访问性:
除了其他答案之外，还有另一种有用的隐藏文本的方法。
此方法有效地隐藏了文本，但允许它对屏幕阅读器保持可见。如果需要考虑可访问性，可以考虑这个选项。
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
值得指出的是，这个类目前在Bootstrap 3中使用。
如果你对无障碍阅读感兴趣:
无障碍网页计划(WAI) MDN易访问性文档
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;
}
要在html中隐藏文本，使用css中的text-indent属性
.classname {
text-indent: -9999px;
white-space: nowrap;
}
/*对于动态文本，您需要添加空白，这样您应用的CSS将不会打扰。Nowrap意味着文本永远不会换行到下一行，文本将继续在同一行上，直到遇到<br>标记
h1 {
text-indent: -3000px;
line-height: 3000px;
background-image: url(/LOGO.png);
height: 100px; width: 600px; /* height and width are a must */
}
如果我们可以编辑标记，生活就会更简单，只需要删除文本就可以了。但有时标记是由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。我想防止箱子变大。
