не отображать текст в div фонового изображения

Question

У меня есть этот div:

<div class="inauguration-image">
  I do not want this text to display, just here for description
</div>

Вот CSS для этого:

.inauguration-image {
    margin-top:5px;
    margin-left:auto;
    margin-right:auto;
    background: url("/images/inauguration_block.png") no-repeat;
    position:relative;
    width:760px;
    height:552px;
}

Я не хочу, чтобы текст отображался, как бы я это сделал?

Answer 1

.inauguration-image {
    margin-top:5px;
    margin-left:auto;
    margin-right:auto;
    background: url("/images/inauguration_block.png") no-repeat;
    position:relative;
    width:760px;
    height:0;
    padding-top:552px;
    overflow:hidden;
}

Настройка height:0 и overflow:hidden скрывает ваш текст; padding-top:552px делает элемент достаточно большим, чтобы отображать фоновое изображение. Это очень портативное решение.

Answer 2

<div class="inauguration-image">
  <p style="display:none">
     I do not want this text to display, 
     just here for description
  </p>
</div>

Я не думаю, что у вас должен быть текст без содержимого внутри div.

Не совсем понятно, что вы пытаетесь сделать. Если вы просто пытаетесь комментировать div, используйте комментарий HTML.

<div class="inauguration-image">
  <!-- I do not want this text to display, 
       just here for description -->
</div>

Answer 3

Вы также можете использовать:

.inauguration-image{
    ....
    text-indent:-9999px;
}

, который просто перемещает текст влево от 9999 пикселей, и вам больше нечего изменить в текущем классе

Answer 4

Использование размера шрифта 0px сделает текст невидимым для глаз. Например:

.inauguration-image {
    margin-top:5px;
    margin-left:auto;
    margin-right:auto;
    background: url("/images/inauguration_block.png") no-repeat;
    position:relative;
    width:760px;
    height:552px;
    font-size: 0px /** Fontsize of 0 makes it invisible */
}