Невидимый текст с помощью CSS

Скрытие текстовых элементов с помощью CSS может быть полезно для различных дизайнерских целей. Одним из распространенных сценариев является замена текста изображением в качестве логотипа. В этой статье рассматривается конкретная проблема: как эффективно удалить исходный текст при отображении изображения.

Решения для скрытия текста

Существует несколько подходов к тому, чтобы сделать текст невидимым при отображении изображения. сохранение размеров элемента для размещения изображения.

Метод 1: отступы текста

Один метод включает в себя выталкивание текста за пределы экрана с помощью text-indent:

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 */
}

Метод 2: скрытие текста

Другое решение позволяет избежать большого невидимого поля, создаваемого отрицательным отступом:

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

Оба метода достигают желаемого результата, либо выталкивая текст за пределы экрана, либо скрывая его внутри элемента.