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

Question

有沒有辦法讓文字出現在嵌入圖像上？

Answer 1

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

您可以使用[當光標懸停在圖片看來，文本]：懸停選擇在CSS使當鼠標懸停在圖片上的文字顯示

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>