有沒有辦法使用css和空白區域來隱藏文本？

Question

我試圖想出解決這個問題的方法。

我有一個控制背景是圖像。

我希望表格上的文字包含在bg圖片中，但是爲了便於使用，我想將它包含在H3標籤中。

我遇到的解決方案的問題是空間仍然分配，我需要它被抑制。它也需要Google友好。

這裏有2個解決方案，我有：

text-indent:-999px; 

text-indent:100%; 
white-space:nowrap; 
overflow:hidden; 

任何想法？

Answer 1

嗯，首先

display: none; 

但是，如果你想，可能還有其他的解決方案，爲造型的標題標籤

/* on its container */ 
overflow: hidden; 

/* on h3 tag */ 
float: left; 
margin-left: -100%; 

或

font-size: 0; 
line-height: 0; 
height: 0; 
overflow: hidden; 

您可能還需要設置/重置其他幾個屬性，以清除標題周圍的任何其他空間，例如

margin, padding, white-space, text-indent, border, etc. 

Answer 2

正常方式隱藏的元素是使用以下中的一個：

visibility:hidden;從而隱藏元件，但仍佔用空間。

display:none;它隱藏了元素並且不佔用空間。

我相信第二個是你想要的在這種情況下。

Answer 3

你可以給font-size:0;你H3標籤開頭將與你的後臺代碼。 ，這將幫助你在SEO也.. DEMO

HTML

<div id="wrap">  
    <h3>heading</h3> 
</div> 

CSS

#wrap { 
    height: 230px; 
    width:660px; 
    background:url("http://www.eldercarefunding.org/Portals/18/Skins/s_eldercare_green/images/header.bgL.png") no-repeat 0 0; 

} 
#wrap h3 { 
    font-size:0; 
}