如何使文字出現在圖像上？

Question

有沒有辦法使文字顯示在嵌入圖像上？

[當光標懸停在圖像上方時，將顯示該文本]

Answer 1

https://css-tricks.com/text-blocks-over-image/

您可以使用css中的：hover選擇器，使鼠標懸停在圖像上時顯示文本

Answer 2

沒有任何示例，是的。 您的圖像和文本應該是不同的實體，因為CSS應該能夠清楚地引用它們。 然后，您可以做這樣的事情。

#your-text-elements-id:hover {
    visibility: "visible"
}

#your-text-elements-id {
    visibility: "hidden"
}

Answer 3

您可以使用以下代碼使文本出現在光標懸停在圖像上

 .texthover { width:100%; display:block; position:relative;} .texthover .overlay { position:absolute; top:25%; height:50%; padding:10px; display:none; } .texthover:hover .overlay { display:block; } 

 <div class="texthover"><br /> <img src="https://lh3.googleusercontent.com/U2R2BfwOe-ZiqI1gSgmTpZPDkWBNacaO8_HZkKkVee-wHlHV505gmX91DZnq-dYbzY96" height="50%" width="50%"/> <div class="overlay"><br /> <h1>Ashok Purohit</h1></div> </div>