將7個圖像合並為一個，一個在另一個上面並輸出為單個圖像？

Question

我已經嘗試將所有圖像對齊在一起，但是因為它是位置：絕對的; 最后的結果是整個頁面浮動。 （這是我今天在問我的另一個問題）所以我在考慮其他方法，我有一個動態加載圖像的網頁：

<div id="AvatarImgFrame">
<img src="http://chaterix.com/public/images/char_elements/base_dark.png">
<img src="http://chaterix.com/public/images/char_elements/eyes/blue.png">
<img src="http://chaterix.com/public/images/char_elements/hair/blond.png">
<img src="http://chaterix.com/public/images/char_elements/mouth/happy.png">
<img src="http://chaterix.com/public/images/char_elements/pants/patrick.png"><img src="http://chaterix.com/public/images/char_elements/shoes/bleu2.png">
<img src="http://chaterix.com/public/images/char_elements/torso/google.png"></div>

我想知道 - 是否可以使用JavaScript（如PHP GD）將所有7個圖像組合成一個圖像並使用javascript在頁面上輸出？

所以說不是打印出上面的代碼，它會做這樣的事情：

<div id="AvatarImgFrame">
<img src="http://chaterix.com/public/tempGenerated/character.png">
</div>

這可能嗎？ 我只是厭倦了位置絕對和浮動的東西，所以如果JS可以組合7個圖像並使其成為1來解決問題。

Answer 1

這應該是非常簡單的CSS和位置絕對。 我知道你說你正在尋找一種不同的方式，但這應該是可行的。 您是否為圖像設置了頂部，底部，右側和左側位置？ 不要忘記您需要在數字后添加px。 另外，不要忘記在父元素上設置position屬性，否則絕對位置會變得不穩定。

Answer 2

如果你正確使用position: absolute ，那么事情就不應該“漂浮在頁面上”。 給父母position: relative ，他們將相對於這個div。 給它一個top和一個left值，如果你全部給它4，當你調整頁面/ div的大小時它會偏斜