在彼此之间堆叠图像

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;' 

这似乎很哈克。是否有一种很好的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中。