在彼此之間堆疊圖像

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中。