HTML/CSS下的文字圖層

Question

我有一張圖片在懸停時消失。如何將文字放置在圖像下方/後面？因此，當圖片消失時，人們將能夠看到文字。

預先感謝您。

Answer 1

，可以使用絕對定位和CSS z-index屬性：

img { 
    position: absolute; 
    top: 10px; 
    left: 10px; 

    z-index: 2; 
} 

img:hover { 
    z-index: 0; 
} 

div { 
    z-index: 1; 
} 

半功能演示：使用z-index的http://jsfiddle.net/Qsmzf/3/

Answer 2

應該這樣做

img 
{ 
position:absolute; 
left:0px; 
top:0px; 
z-index:1; 
} 

應將圖像放在文本的頂部，然後當您懸停時，它應該顯示文字。

Answer 3

如果您將圖像的CSS設置爲position: absolute;，則可以將z-index屬性設置爲覆蓋文本。您可能不得不將圖像放在容器中，因爲絕對定位可能會移動圖像。

例如：http://jsfiddle.net/NPExr/