css - DIV 在 TD 内的 IMG 上

Question

我需要在 TD 内的 IMG 上放置一个 DIV，只是为了显示一些东西，但是当我这样做时，DIV 是在 IMG 下创建的(不是覆盖，只是在下面，就像向左浮动和向右清除...)

HTML:

<table id="table" cellspacing="0">
    <tr>
        <td><img src="something-here.jpg" alt="asd"/><div>Text over the image</div></td>
        <td><img src="something-here.jpg" alt="asd"/><div>Text over the image</div></td>
        <td><img src="something-here.jpg" alt="asd"/><div>Text over the image</div></td>
    </tr>
</table

Answer 1

你可以像这样使用 css:

#table td, #table td img {
  position:relative
}
#table td img {
  z-index:-1
    max-width:100%;
}
#table td div {
  position:absolute;
  bottom:0;
  background:rgba(0,0,0,0.5);
  color:#fff;
  width:100%;
}

示例:http://jsbin.com/iyESasiv/1/edit .您可以从 css 中删除背景颜色等。