css 图片上加提示框

CSS 提供了很多方法来美化我们的网站，其中一种方式是在图片上加上提示框，方便网站访客了解图片的内容或作用。下面介绍一些实现该功能的 CSS 代码。

.img-tooltip {
  position: relative; /* 让提示框相对于图片定位 */
  display: inline-block; /* 让图片与提示框在同一行显示 */
}

.img-tooltip:hover .tooltip {
  opacity: 1; /* 鼠标滑过图片后显示提示框 */
  visibility: visible;
}

.tooltip {
  position: absolute; /* 绝对定位 */
  top: 100%; /* 在图片下方 */
  left: 50%; /* 居中 */
  transform: translateX(-50%); /* 居中 */
  background-color: black;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  opacity: 0; /* 默认不显示 */
  visibility: hidden;
  transition: opacity 0.2s ease-in-out; /* 动画效果 */
}

代码中，.img-tooltip 表示包裹图片的元素，.tooltip 表示提示框。通过设置 .img-tooltip 的 position: relative，让 .tooltip 相对于它定位，实现提示框的显示效果。.tooltip 的默认状态是不显示的，通过 :hover 伪类来控制其显示和隐藏。其他 CSS 属性则为提示框的样式。

在 HTML 中，只需要在图片上添加 .img-tooltip 类名，以及在图片和提示框中加入对应的 HTML 元素即可。如下所示：

<div class="img-tooltip">
  <img src="yourimage.jpg" alt="yourimage">
  <div class="tooltip">your tooltip text</div>
</div>

代码实现的效果类似如下图：

通过 CSS，在图片下方产生了一个黑色的提示框，显示了“placeholder”文本。

使用 CSS 图片提示框功能，可以为我们的网站添加更多细节和交互性。希望这篇文章对你有所帮助。

css 图片上加提示框

相关文章