使用CSS隐藏文字

Question

我的html中有这样的标签：

<h1>My Website Title Here</h1>

使用CSS我想用我的实际徽标替换文本。我已经通过调整标签大小并通过css将背景图像放到徽标中了，没有问题。但是，我不知道如何摆脱文本。我以前看过基本上是通过将文本从屏幕上推送来完成的。问题是我不记得在哪里看到它。

Answer 1

这是一种方法：

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;
}