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

只是将文本移动到9999px的左侧，而且你当前的课程中没有其他任何内容可以改变

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 */
}

不要在背景图像的div中显示文本

4 个答案: