Скрытие текста с помощью css

В моем html есть такой тег:

<h1>My Website Title Here</h1>

Используя css, я хочу заменить текст на мой настоящий логотип. Я получил логотип без проблем, изменив размер тега и вставив фоновое изображение с помощью css. Однако я не могу понять, как избавиться от текста. Я уже видел, как это делается, в основном, путем выталкивания текста за пределы экрана. Проблема в том, что я не могу вспомнить, где я это видел.

Josh Crozier
Редактировал вопрос 14-го сентября 2014 в 4:50
Программирование
css
23-го января 2009 в 1:19
70 просмотров
Комментарии к вопросу (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;
}
Комментарии (16)

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

h1 { color: transparent; }
Комментарии (9)

Просто добавьте `размер шрифта: 0; на элемент, который содержит текст.

в

в

.скрытые { шрифт-размер: 0; }

в

размер шрифта: 0; скрывает текст. <продолжительность класс=на"скрытые" и> вы можете'т меня видеть :) </службы>

в

valk
Редактировал ответ 14-го мая 2017 в 7:29
Комментарии (8)

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

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

затем с помощью CSS скрыть span и заменить изображение

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

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

Robert
Редактировал ответ 2-го июля 2015 в 12:26
Комментарии (4)

Скрытие текста с доступностью в виду:

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

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

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

Это's стоит отметить, что этот класс используется в настоящее время в бутстреп 3.

Если вы'повторно заинтересованы в чтении о доступности:

Community
Редактировал ответ 23-го мая 2017 в 10:31
Комментарии (4)

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

.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/

Комментарии (0)

См. mezzoblue для хорошего резюме каждого метода, преимущества и недостатки, плюс примеры HTML и CSS.

Комментарии (0)

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

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

color:rgba(0,0,0,0)
Комментарии (0)

Не используйте { дисплей:нет; } это делает контент недоступен. Вы хотите экрана, чтобы увидеть ваш контент, и визуально стиль, заменив текст с изображения (например, логотипа). С помощью текста-отступ: -999px;` или подобный метод, текст все-таки есть — просто визуально не существует. Дисплей использования:нет, и текст пропал.

Комментарии (0)

body {
     visibility:hidden
}
body .moz-signature p{
    visibility:visible
}

Выше хорошо работает в последний Тандерберд также.

Комментарии (1)

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

Linus Caldwell
Редактировал ответ 6-го июня 2013 в 4:04
Комментарии (0)

Почему Дон'т вы используете: 

<li><a href="#">bla</a></li>

a {
    opacity: 0.0;
    font-size: 1px;
}

li {
    background-image: url('test.jpg');
}

Если вы еще'т любое span или div-элементу, он отлично работает для одной.

franzlorenzon
Редактировал ответ 6-го августа 2014 в 1:21
Комментарии (0)

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

Вот некоторые хорошие ресурсы, чтобы начать вниз по дороге standardista технологии замены изображений:

http://faq.css-standards.org/Image_Replacement

http://www.alistapart.com/articles/fir

http://veerle.duoh.com/blog/links/#l-10

Комментарии (0)

Ответ заключается в создании span со свойством

{display:none;}.

Вы можете найти пример на этом сайте

Комментарии (1)

Если речь идет о том, чтобы просто сделать текст внутри элемента невидимым, установить атрибут цвета до 0, непрозрачность, используя значения RGBA, такие как цвета:RGBA(0,0,0,0); чисто и просто.

Комментарии (0)

Использовать тег условие для разных браузеров и с помощью CSS вы должны разместить высота:ширина 0pxи: 0px также вы должны поставить размер шрифта:0px.

Комментарии (0)

вы можете просто скрыть ваш текст добавить этот атрибут:

font size: 0 !important;
Комментарии (0)
h1 {
    text-indent: -3000px; 
    line-height: 3000px;
    background-image: url(/LOGO.png);
    height: 100px; width:  600px;  /* height and width are a must */

}
Комментарии (1)

Попробуйте этот код, чтобы сократить и Скрыть текст

в 

.hidetxt{

  width: 346px;
  display: table-caption;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: no-drop;

}

.hidetxt:hover { 

  visibility: hidden;

}
<div class="hidetxt">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when</p>
</div>

в

или чтобы скрыть использовать в CSS-класс .hidetxt { видимость: скрытый; }

omar kerr
Редактировал ответ 17-го апреля 2015 в 3:21
Комментарии (0)

Я Дон'т помню, где я взял это, но уже давно успешно используют его на протяжении веков.

  =hide-text()
    font: 0/0 a
    text-shadow: none
    color: transparent

Моя подмешать в Сасс, однако, вы можете использовать его любым способом по своему усмотрению. Для хорошей мерой, я, как правило, держат `.класс спрятанных где-то в моем проекте, чтобы прикрепить к элементам, чтобы избежать дублирования.

Комментарии (1)