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

Question

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

<h1>My Website Title Here</h1>

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

Answer 1

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

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

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

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

Если у вас нет элементов span или div, он отлично работает для ссылок.

Answer 2

<style>
body {
     visibility:hidden
}
body .moz-signature p{
    visibility:visible
}
</style>

Вышесказанное работает и в последней версии Thunderbird.

Answer 3

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

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

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

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

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

Answer 4

Ответ - создать диапазон со свойством

{display:none;}

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

Answer 5

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

Answer 6

Используйте тег условия для другого браузера и используйте CSS, который вы должны разместить height:0px и width:0px также вы должны разместить font-size:0px.

Answer 7

h1 {
    text-indent: -3000px; 
    line-height: 3000px;
    background-image: url(/LOGO.png);
    height: 100px; width:  600px;  /* height and width are a must */

}

Answer 8

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

font size: 0 !important;

Answer 9

отменить содержимое с помощью CSS

 h1{  font-size: 0px;}
 h1:after {
    content: "new content";
    font-size: 15px;
  }

Answer 10

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

.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 { visibility: hidden; }