我有一个标签在我的html像这样:
<h1>My Website Title Here</h1>
使用css我想替换文字与我的实际标志。我已经得到的标志没有问题，通过调整标签和把背景图像通过css。然而，我不知道如何去掉这段文字。我以前见过，基本上就是把文字从屏幕上推开。问题是我不记得在哪里看到的。
当前回答
在元素中使用0值的字体大小和行高对我来说是有用的:
<style>
.text {
display: block;
width: 200px;
height: 200px;
font-size: 0;
line-height: 0;
}
</style>
<span class="text">
Invisible Text
</span>
其他回答
在元素中使用0值的字体大小和行高对我来说是有用的:
<style>
.text {
display: block;
width: 200px;
height: 200px;
font-size: 0;
line-height: 0;
}
</style>
<span class="text">
Invisible Text
</span>
跨浏览器最友好的方式是将HTML编写为
<h1><span>Website Title</span></h1>
然后使用CSS隐藏跨度和替换图像
h1 {background:url(/nicetitle.png);}
h1 span {display:none;}
如果你可以使用CSS2，那么还有一些更好的方法来使用内容属性，但不幸的是，web还没有100%做到这一点。
答案是使用该属性创建一个span
{显示:没有;}
你可以在这个网站上找到一个例子
在CSS中，可以使用Content属性直接进行内容替换。
这似乎最常用于生成::before和::after伪元素，但也可用于替换现有HTML元素的内容。
对于最初的示例
<h1>My Website Title Here</h1>
这个CSS将用logo替换文本:
h1 {
content: url(mywebsitelogo.png);
width: 100%;
}
虽然在伪元素中，任何图像内容都不能调整大小(除非将其用作背景图像)，但对于替换的内容则不是这样。
默认情况下，图像将显示其实际大小，并在必要时展开容器，就像它包含一个实际的<img>元素一样。
在本例中，width: 100%用于将标志图像贴合到全宽度。如果需要将图像缩小到合适的位置，但如果容器比图像大，则永远不要展开，那么可以使用max-width: 100%来代替。
根据MDN的说法，目前唯一不支持CSS内容替换的普通浏览器是Internet Explorer。
不要使用{display:none;它使内容无法访问。您希望屏幕阅读器看到您的内容，并通过将文本替换为图像(如徽标)来视觉化它。text-indent: -999px;或者类似的方法，文本仍然在那里——只是没有视觉上的存在。使用display:none，文本就消失了。
