Скрыть текст с помощью CSS

Question

У меня есть тег в моем HTML, как это:

<h1>My Website Title Here</h1>

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

Answer 1

Я не помню, где я поднял это, но использовал это успешно целую вечность.

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

Мой миксин в sass, но вы можете использовать его так, как считаете нужным. В качестве меры предосторожности я обычно держу класс .hidden где-то в своем проекте, чтобы присоединить его к элементам, чтобы избежать дублирования.

Answer 2

Один из способов добиться этого - использовать :before или :after. Я использовал этот подход в течение нескольких лет, и особенно хорошо работает с векторными значками глифов.

h1 {
    position: relative;
    text-indent: -9999px;                 /* sends the text off-screen */
    }
h1:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 600px;
    height: 100px;
    content: ' ';
    background: transparent url(/the_img.png) 0 0 no-repeat;
    }

Answer 3

Если мы сможем отредактировать разметку, жизнь станет проще, просто удали текст и будь счастлив. Но иногда разметка была размещена с помощью кода 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 ) могут читать ширину и высоту как min-width и min-height. Я хочу предотвратить увеличение коробки.

Answer 4

Чтобы скрыть текст из html, используйте свойство text-indent в css

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

/ * для динамического текста вам нужно добавить пробел, чтобы применяемый css не мешал. nowrap означает, что текст никогда не будет перенесен на следующую строку, текст продолжается на той же строке, пока не встретится тег <br>

Answer 5

Использование нулевого значения для font-size и line-height в элементе помогает мне:

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

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

<span class="text">
    Invisible Text
</span>

Answer 6

Я обычно использую:

span.hide
{
  position:fixed;
  right:-5000px;
}

Answer 7

Это сработало для меня с span (проверка на выбивание).

<span class="validationMessage">This field is required.</span>

.validationMessage {
    background-image: url('images/exclamation.png');
    background-repeat: no-repeat;
    margin-left: 5px;
    width: 16px;
    height: 16px;
    vertical-align: top;

    /* Hide the text. */
    display: inline-block;
    overflow: hidden;
    font-size: 0px;
}

Answer 8

h1{
   background:url("../images/logo.png") no-repeat;
   height:180px;
   width:200px;
   display:inline-block;
   font-size:0px !important;
   text-intent:-9999999px !important;
   color:transparent !important;
 }

Answer 9

Решение, которое работает для меня:

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

Answer 10

Лучший ответ работает для короткого текста, но если текст переносится, он просто появляется на изображении.

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

$('#logo img').error(function(){
    $('#logo').html('<h1>My Website Title Here</h1>');
});

См. ОБРАЗЕЦ КОДА