Укладка изображений поверх каждого другого

Question

У меня есть сайт PHP, на котором отображается таблица изображений. Каждое изображение имеет «фон» для них, которые определены пользователем. Таким образом, пользователи могут сказать «Я хочу красный фон», и все изображения будут отображаться с 10-кратной границей их цвета.

Кроме того, это статический фон.

Чтобы выполнить это, я сначала повторяю статическое изображение, затем цветное изображение пользователя, затем изображение таблицы.

echo "<img src='Static.jpg' width='60' height='60' />"; 
echo "<img src='User$userColor.jpg' width='60' height='60' />"; 
echo "<img alt='TableImage' width='50' height='50' />"; 

Currentley, я нажимаю два последних изображения вверх, прилагая это к ним:

style='position:relative; top:-55px; margin-bottom: -55px;' 

Это кажется очень Hacky. Есть ли хороший способ CSS, я могу складывать изображения, так что, когда я изменяю размер или порядок, мне не нужно сканировать и редактировать стили каждого изображения?

спасибо.

Answer 1

CSS:

<img alt='TableImage' width='50' height='50' style="border: 10px solid $userColor"/> 

Answer 2

Ваш вопрос немного неясно, но вместо того, чтобы использовать изображение, чтобы создать 10px рамку вокруг статического изображения, то почему бы не просто использовать CSS, добавив класс к каждому изображению вы хотите граница?

.staticImage { border: 10px solid <?php print $color; ?>; } 

Вы можете сохранить цвет границы, который они хотят в файле cookie, например.