如何在网页上显示像图像一样的图像

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魔法。

Live Demo（不包含任何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中制作最终的图像。