Question

我最难用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，我无法弄明白。有人可以引导我朝着正确的方向前进。

Answer 1

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

Answer 2

执行此操作的正确方法是设置背景而不是添加图像元素

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

Answer 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/

图像上的CSS文本

3 个答案: