一个对我有效的解决方案:

HTML

<div class="website_title"><span>My Website Title Here</span></div>

CSS

.website_title {
    background-image: url('../images/home.png');
    background-repeat: no-repeat;
    height: 18px;
    width: 16px;
}

.website_title span {
    visibility: hidden;
}

在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。

如果我们可以编辑标记，生活就会更简单，只需要删除文本就可以了。但有时标记是由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。我想防止箱子变大。

在元素中使用0值的字体大小和行高对我来说是有用的:

<style>
    .text {
        display: block;
        width: 200px;
        height: 200px;

        font-size: 0;
        line-height: 0;
    }
</style>

<span class="text">
    Invisible Text
</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;
}

要在html中隐藏文本，使用css中的text-indent属性

.classname {
 text-indent: -9999px;
 white-space: nowrap; 
}

/*对于动态文本，您需要添加空白，这样您应用的CSS将不会打扰。Nowrap意味着文本永远不会换行到下一行，文本将继续在同一行上，直到遇到<br>标记