如何在网页上显示带有图层的头像图像

Question

我正在尝试实现像雅虎头像这样的东西，其中有一个固定的背景图像，然后我在前景中排列几个项目来创建一个头像。

我现在正在做的是创建很多组合图像模式。然后为每个图像模式分配一个二进制数。在网站上，我使用一些数据生成二进制数，并引用特定于该数字的图像。 这可以完成工作，但会占用大量空间，并且如果我必须更改某些图像图案，工作就会变得多余。我当然可以自动化 Fireworks 导出切片过程，但我想知道是否有更好的方法可以实现此目的。

我可以使用透明 PNG、CSS z-index 和绝对定位来实现这一点，但这需要大量调整才能使其兼容所有浏览器。

有什么方法可以使用 SVG/Javascript 或者 ActionScript/Flex 或其他方式吗？有人可以为此建议一些选择吗？

Answer 1

如果您不太担心浏览器兼容性，我可能会考虑使用 HTML canvas元素。

然而，根据你对调整的评论，我认为你是;)

所以，我要么使用Flash，要么使用PHP GD。就我个人而言，我会选择 GD，因为您拥有在单个 php 渲染页面中组装图像的所有逻辑。跨浏览器兼容性没有问题，也没有安装 Flash 的客户端（或者没有本机 Flash 插件的浏览器；））。

Answer 2

我同意@Demian Brecht 的观点，您应该在服务器端生成图像，然后将简单的 .png 图像输出到浏览器。

但是，如果您希望用户能够在头像内拖动东西，以自定义狗、帽子或其他任何东西的位置，那么这种方法就不太有效。

---

这是一个 HTML/CSS 解决方案，使用无聊的矩形而不是炫酷的图像：

其想法是为每个可以放置的项目制作精确大小的透明 .png 图像。

您可以使用 top、left、width、height、z-index 属性 - 这就是允许用户精确定位所需的全部内容；添加一点 jQuery 魔法。

现场演示（不包含任何JS，然而）

CSS：

.avatarContainer {
    width: 153px;
    height: 226px;
    border: 1px solid #666;
    background: #ccc;
    position: relative
}
.avatarContainer div {
    position: absolute
}

HTML：

<div class="avatarContainer">
    <div style="top:20px; left:40px; width:40px; height:50px; background:red; z-index:3"></div>
    <div style="top:60px; left:40px; width:80px; height:60px; background:blue; z-index:2"></div>
    <div style="top:180px; left:10px; width:110px; height:20px; background:#000; z-index:1"></div>
</div>

我会用它来允许用户拖动东西并将放置位置提交到服务器；然后你可以用 PHP 制作最终的图像。