漂浮文本在表格单元格内的图像

问题描述：

我想在表格中的第一行的第三列中的图像上浮动文本。该单元格内有一个<img>（由psd切片处理），我想将文字放在它上面。我试过float: left和position: absolute，但似乎没有任何工作。漂浮文本在表格单元格内的图像

任何想法？

答

position:absolute结合z-index应该工作。

如果在您的设计中可能，您也可以使用图像作为表格单元格的背景，并将文本作为其内容。

编辑：另请参阅this question关于一个问题，我只在IE浏览器中使用图像顶部的文本。

如果将其更改为背景图像，我仍然可以保留图像的0边框。表格中的所有图像创建一个大图像 – mattgcon 2010-10-18 21:03:04

只要单元格具有正确的尺寸，它应该完美地工作。另请注意，背景图像从不具有边框。 – jeroen 2010-10-18 21:04:40

如果需要，不要忘记删除表格“border”和“cellspacing”。 – 2010-10-18 21:16:26

答

虽然我还建议规范办法（把图像作为背景），下面是做它只是定位的解决方案：

<td style="position:relative;"> 
    <img src="..." style="position:absolute;z-index:1;" /> 
    <div style="z-index:2;position:relative;">your text goes here</div> 
</td>

你可能会发现它进一步参考价值。

漂浮文本在表格单元格内的图像

相关推荐