Скрыть текст с помощью 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;
}

Answer 2

Почему бы просто не использовать:

h1 { color: transparent; }

Answer 3

Просто добавьте font-size: 0; к вашему элементу, который содержит текст.

.hidden { font-size: 0; }

  font-size: 0; hides text. <span class="hidden"> You can't see me :) </span>

Answer 4

Наиболее удобный для браузера способ - написать HTML как

<h1><span>Website Title</span></h1>

затем используйте CSS, чтобы скрыть диапазон и заменить изображение

h1 {background:url(/nicetitle.png);}
h1 span {display:none;}

Если вы можете использовать CSS2, то есть несколько лучших способов использовать свойство content, но, к сожалению, там пока нет 100%.

Answer 5

Сокрытие текста с учетом доступности:

В дополнение к другим ответам, здесь есть еще один полезный подход для сокрытия текста.

Этот метод эффективно скрывает текст, но позволяет ему оставаться видимым для программ чтения с экрана. Это вариант для рассмотрения вопроса о доступности.

.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 Документация о доступности

Answer 6

Джеффри Зельдман предлагает следующее решение:

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

Это должно быть менее ресурсоемким, чем -9999px;

Пожалуйста, прочитайте все об этом здесь:

http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

Answer 7

См. mezzoblue для краткого описания каждой техники, с сильными и слабыми сторонами, а также с примерами html и css.

Answer 8

Так много сложных решений.

Самый простой - просто использовать:

color:rgba(0,0,0,0)

Answer 9

Не использовать { display:none; } Это делает контент недоступным. Вы хотите, чтобы программы чтения с экрана могли видеть ваш контент и визуально оформлять его, заменяя текст изображением (например, логотипом). Используя text-indent: -999px; или подобный метод, текст все еще там - только визуально там. Используйте display:none, и текст исчезнет.

Answer 10

вы можете использовать свойство css background-image и z-index, чтобы изображение оставалось перед текстом.