图像上的 CSS 文本答案

【问题标题】：CSS Text on an Image图像上的 CSS 文本
【发布时间】：2012-05-30 21:22:11
【问题描述】：

我最难使用 CSS，因为它看起来如此善变。需要帮助。

我希望我的“section.png”图像是可单击的标题栏，并且当您单击标题栏时表格会展开和折叠。

<table width="100%">
 <tr>
 <td width=80% align=left>
 <font color="white" size="4"><strong>&nbsp;General Airport Information</strong></font>
 </td>
 <td align=right><font color="white" size="2">
    <div id='oc5' style="border-style: none; vertical-align:bottom;">
<img src="http://.../images/expand.png" width="15" height="15" style="border-style: none; vertical-align:top;">&nbsp;Show&nbsp;
</div></font>
</td>
</tr>
</table>
</div>

^^^ 上面“Div”中的所有内容都需要位于 section.png 图像的顶部。 ^^^

<div id="id5" style="display: none">    

<table width=80% align="center">
<tr align="left">
    <td colspan="2" align="right">
   Hidden text - Until Header Bar is Clicked.
    </td>
</tr>
</table>
</div>

关于这个问题，我已经四处寻找答案。我知道它与 CSS 和浮动或位置以及绝对或相对有关。 IDK，我想不通。有人可以引导我朝着正确的方向前进吗？

【问题讨论】：

您需要在点击时展开和折叠内容吗？
您的代码似乎不完整 - section.png 实际上并未出现在标记中。此外，第一个块中没有打开 <div> 标记。
上个世纪停止使用。
请问您为什么使用表格？标签在几年前也被贬值了。并且，通过将 section.png 设置为父 div 的背景图像来尝试@sha404 回答。
jsfiddle.net/YaMhn/18

标签： css css-float css-position

【解决方案1】：

正确的做法是设置背景而不是添加图像元素

<div class="parent" style="background: url('image.jpg'); height: 300px; width: 500px;">
    <div class="text">...</div>
</div>

【讨论】：

【解决方案2】：

不，不是这样的。如果你想在图片上显示文字，你应该使用 section.png 作为 div oc5 的背景图片。和 expand.png 作为 div id5 的背景图片。你可以在css文件或<style>标签中设置。

【讨论】：

【解决方案3】：

我想你把文字放在图片上

你可以像这样使用位置

css

.parent{
    position:relative;
    width:600px;
}

.child{position:absolute;
    top:0;
    left:0;
    right:0;
    color:white;

}

HTML

<div class="parent">
    <img src="http://dummyimage.com/600x400/000/fff.jpg" alt="" />
    <div class="child">This is dummy Text put here any text
        This is dummy Text put here any textThis is dummy Text put here any textThis is dummy Text put here any textThis is dummy Text put here any textThis is 
        dummy Text put here any textThis is dummy Text put here any textThis is dummy Text put here any textThis is dummy Text put here any text</div>
</div>

现场演示http://jsfiddle.net/rohitazad/R82Ge/1/

【讨论】：

^^^^这解决了它。另一个问题。第二个 div 离图像顶部有点太近了，如何将其向下移动约 2mm。