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>

如何在图像上显示文字？

3 个答案: