DIV над IMG внутри TD

Question

DIV над IMG внутри TD

0

Мне нужно поставить DIV поверх IMG внутри TD, просто чтобы показать что-то, но когда я это делаю, DIV создается под IMG (не накладывается, просто под ним, как float слева и четко прав...)

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

Lloople 03 дек. 2013, в 18:24

Источник

Теги:

html

css

image

3 ответа

0

Вы просто можете установить правильный индекс.

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

проще:

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

и в вашем файле css добавьте:

.imgClass{
   z-index:0;
}
.divClass{
   z-index:1;
}

Aditzu 03 дек. 2013, в 14:35

0

Это поможет вам разобраться:

#table td { position:relative; }
#table div {
    left:0;
    position:absolute;
    top:0;
}

Просто добавьте это в свой css для таблицы

Michael Tempest 03 дек. 2013, в 14:25

Ещё вопросы

Ravimallya · Accepted Answer · 2013-12-03T15-49-00.000Z

Вы можете использовать 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.

Удивительно! Я пробовал это раньше, но я кое-что забыл, потому что мой код не работал .. Большое спасибо!