Как расположить/наложить прозрачный *png на «таблицу» с помощью CSS?

Проблема

Мне нужно разместить прозрачное изображение png над элементом таблицы.

Уточнение

Под «местом» я подразумеваю, что изображение будет располагаться поверх стола, как слой или наклейка, а не вертикально над ним. Другими словами, я хочу, чтобы мое изображение двигалось вперед по оси Z, а не вверх по оси Y.

Контекст

У меня есть таблица 8 х 6 ячеек. Ячейки не содержат текста, но содержат цвет фона, подразумевающий значение. Я хочу разместить белый силуэт над столом из эстетических соображений.

Что я пробовал

Я попытался обернуть таблицу в div, применив изображение в качестве фона, а затем попытался перенести его на z-индекс.

Базовая демонстрация HTML:

<div class="table-foreground">
    <table>
        <tr>
            <td>
            </td>
        </tr>
    </table>
</div>

Базовая демонстрация сопутствующего CSS:

td{
background-color:#000;
}

div.table-foreground{
background-image:url(images/table-foreground.png);
position:relative;
z-index:5;
}

Результат

Примечание: thescientist запросил, чтобы я предоставил результат моей попытки кода.

Визуально ничего не происходит. Я предполагаю, что div с изображением png в качестве фона находится под моей таблицей. Это говорит о том, что моего кода недостаточно.


image overlay css foreground
person Dominor Novus    schedule 08.07.2011    source источник

Ответы (1)


arrow_upward
2
arrow_downward

  1. оберните свою таблицу в div (позиция: относительная;)
  2. поставить свой стол внутрь
  3. поместите свое изображение внутри div (позиция: абсолютная; верхняя: Y; левая: X;)
  4. меняйте X и Y до тех пор, пока это не будет там, где вы хотите, над столом.
<div style="position: relative;">
    <table>

    </table>
    <div style="background-image: url('picURL'); position: absolute; top: Y; left: X; width:Xpx;height;Ypx;">
    </div>
</div>
person circusdei    schedule 08.07.2011
comment
Спасибо за объяснение и код, но я не смог получить желаемый результат, используя ваш пример. Ошибка может быть моей частью. - person Dominor Novus; 09.07.2011