如何使用真实文本在悬停时在图像上显示文本？-css教程-PHP中文网

如何使用真实文本在悬停时在图像上显示文本？

Patricia Arquette

发布： 2024-12-12 16:37:10

原创

305 人浏览过

How Can I Display Text Over an Image on Hover Using Real Text?

使用真实文本在悬停时显示文本

您可以使用真实文本而不是图像精灵在悬停时在图像上显示文本。操作方法如下：

将要在悬停时显示的图像和描述包含在容器 div 内。此 div 的尺寸应与图像相同。

 <img  class="img__img" src="%E2%80%9Chttp://placehold.it/257x200.jpg%E2%80%9D/" alt="如何使用真实文本在悬停时在图像上显示文本？" ><br> <p></div>

将以下 CSS 分配给容器 div (.img__wrap):

.img__wrap {
  position: relative;
  height: [Set to match image height];
  width: [Set to match image width];
}

登录后复制

将文本描述绝对定位在容器 div 内(.img__description).

.img__description {<br> 位置：绝对；<br> 顶部：0 ;<br> 底部：0;<br> 左：0;<br> 右： 0;<br> 背景：rgba(0, 0, 0, 0.7);<br> 颜色：#fff;<br> 可见性：隐藏；<br> 不透明度： 0;<br>}<pre class="brush:php;toolbar:false"></div>
</div>

Make the text description visible and opaque on hover by adding the following CSS:

<div>

登录后复制

使用此解决方案，当用户将鼠标悬停在图像上时，您的文本描述将显示在图像上结束了。