CSS текст на изображении - PullRequest
Новая
       9

CSS текст на изображении

1 голос
/ 30 марта 2012

У меня самое сложное время с 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 и float или position и абсолютным или относительным.ИДК, я не могу понять это.Может ли кто-нибудь направить меня в правильном направлении.

Ответы [ 3 ]

2 голосов
/ 31 марта 2012

Правильный способ сделать это - установить фон вместо добавления элемента изображения 

<div class="parent" style="background: url('image.jpg'); height: 300px; width: 500px;">
    <div class="text">...</div>
</div>
2 голосов
/ 30 марта 2012

Нет, не так. если вы хотите, чтобы текст на изображении, вы должны использовать section.png в качестве div oc5 в качестве фонового изображения. и expand.png в качестве фонового изображения div id5 . Вы можете установить как в css файле, так и в теге <style>.

1 голос
/ 31 марта 2012

Я думаю, что вы положили текст на изображение

, вы можете использовать положение, как это

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/

...