图像HTML / CSS下的文本图层

Question

我的照片在悬停时消失了。如何在图像下方/后方放置文字？因此，当图片消失时，人们将能够看到文本。

提前谢谢你。

Answer 1

您可以使用绝对定位和CSS z-index属性：

img {
  position: absolute;
  top: 10px;
  left: 10px;

  z-index: 2;
}

img:hover {
  z-index: 0;
}

div {
  z-index: 1;
}

半功能演示：http://jsfiddle.net/Qsmzf/3/

Answer 2

使用z-index应该这样做

img
{
position:absolute;
left:0px;
top:0px;
z-index:1;
}

这应该将图像放在文本的顶部，然后当你悬停时它应该显示文本。

Answer 3

如果您将图片的CSS设置为position: absolute;，则可以设置z-index属性以覆盖文本。您可能必须将图像放在position: relative;的容器中，因为绝对定位可能会移动图像。

示例：http://jsfiddle.net/NPExr/