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

I have this div:

我有这个div:

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

Here is the css for it:

这是它的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;
}

I do not want the text to display, how would I go about doing that?

我不希望文本显示,我该怎么做呢?

4 个解决方案

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

Setting height:0 and overflow:hidden hides your text; padding-top:552px makes the element large enough to display your background image, anyway. This is a very portable solution.

设置高度:0和溢出:隐藏隐藏文本; padding-top:552px使元素足够大,无论如何都能显示你的背景图像。这是一个非常便携的解决方案。

#2

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

I don't think you're supposed to have uncontained text inside a div.

我认为你不应该在div中包含非包含文本。

It's not quite clear what you're trying to do. If you're just trying to comment the div, use an HTML comment.

目前还不清楚你要做什么。如果您只是想对div进行评论,请使用HTML评论。

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

#3

you could also use:

你也可以用:

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

which just moves the text to the left of 9999px and well you don't have anything else to change in your current class

它只是将文本移动到9999px的左侧,而且您当前的类中没有任何其他内容可以更改

#4

Using a font size of 0px will make the text invisible to the eye. For example:

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

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