将7个图像组合为一个，一个在另一个之上，并输出为单个图像

Combine 7 images into one, one on top of each other and output as single image?

本文关键字：一个 图像 单个 输出 组合 7个 另一个      更新时间：2024-04-15

我尝试过将所有图像相互对齐，这很有效，但因为它是position:absolute；最后的结果是页面上到处都是浮动的。（这是我今天在SO上问的另一个问题）所以我在考虑其他方式，我有一个动态加载图像的网页，如下所示：

<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，就会解决问题。

使用CSS和position absolute应该非常简单。我知道你说过你正在寻找一种不同的方式，但这应该是可行的。您是否设置图像的顶部、底部、右侧和左侧位置？别忘了，你需要在数字后面加上px。另外，不要忘记在父元素上设置position属性，否则position absolute会变得不稳定。

如果正确使用position: absolute，就不应该"在页面上浮动"。给父级position: relative，它们将相对于这个div。给它一个top和一个left值，如果你给它全部4，当你调整页面大小时，它会倾斜

相关文章：