css 移到图片上显示文字

使用 CSS 在图片上悬停显示文字的效果，是 Web 设计中的一个常见技巧。这个效果让用户可以快速了解图片的具体内容，增强了网页的可读性。本文将介绍如何使用 CSS 实现图片悬停显示文字的效果。 首先，我们需要为要显示文字的图片添加一个父元素。这个父元素可以是一个容器，也可以是一个链接。我们在 HTML 代码中添加一个容器元素：

<div class="img-container">
  <img src="picture.jpg">
  <p class="caption">这是图片的说明文字</p>
</div>

然后，我们使用 CSS 中的伪类选择器 `:hover` 来实现当鼠标经过图片时显示文字的效果。我们需要将图片的 `position` 设置为 `relative`，这样我们才能通过修改图片上的 `top` 和 `left` 值来调整文字的位置。我们还需要使用 `visibility` 属性将说明文字的可见性设置为隐藏。

.img-container {
  position: relative;
}

.caption {
  visibility: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.img-container:hover .caption {
  visibility: visible;
}

在上面的代码中，我们首先将 `position` 属性设置为 `relative`，为图片建立了一个相对定位的坐标系。接着，我们将说明文字的 `visibility` 属性设置为 `hidden`，并使用 `position` 属性将其定位到图片的中心。最后，当鼠标经过图片时，我们通过使用 `.img-container:hover .caption` 选择器将 `visibility` 属性设置为 `visible`，从而显示说明文字。 完整的代码如下所示：

<style>
  .img-container {
    position: relative;
  }
  
  .caption {
    visibility: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  
  .img-container:hover .caption {
    visibility: visible;
  }
</style>

<div class="img-container">
  <img src="picture.jpg">
  <p class="caption">这是图片的说明文字</p>
</div>

以上就是使用 CSS 实现图片悬停显示文字的方法。通过这个技巧，我们可以为网页增加额外的信息，让用户更加轻松地理解网页中的图片。