不要在背景圖像的div中顯示文本

[英]do not display text in div of background-image


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

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2009/01/21/7def1825e09066eb548859d8098f3d83.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com