jquery - 在对象上放置图像（伪 3D）

Question

如果有人能指出一个在对象上放置图像的插件，我将不胜感激。具体来说，我需要上传的图像以伪 3d 视图出现在瓶子上。我是一个 jQuery 新手，所以我似乎不可能自己编写这样一个困难的插件。一个例子它应该是什么样子：

编辑：展示我所说的伪 3d 的杯子示例。

Answer 1

首先是一些结构：

<div id="container">
    <div id="bottle"></div>
    <div id="tag"></div>
</div>

然后你设置样式：

#container{
    position:relative
}
#bottle{
    background: [your bottle image here, no transparency needed]
    z-index:0;
}
#tag{
    position:absolute;
    top: [whatever px];
    left: [another px];
    background: [your tag image here with transparent bg]
    z-index:100;
}

Answer 2

您可以通过以下几种方式做到这一点：

• 服务器端，使用例如。PHP图像处理功能：您加载背景（瓶子图像）并覆盖客户端上传的图片。这是我的首选方式，因为您可以提供正确的图像；
• 客户端使用 3 层解决方法：
  • 最底部：带有空标签的瓶子的图像
  • 中间层：客户端上传的图片
  • 最上层：PNG-24风味的同瓶图片，标签处有一个透明的“洞”，通过它可以看到“标签”（即客户端上传的图片）。

免责声明：以下内容非广告，仅供参考。

我为一个允许客户在包包上“蚀刻”自己的照片的网站做了类似的事情。我使用 PHP 后端生成包的缩略图，并使用 Raphael.js（与Raphael 免费转换插件一起）在包上交互式放置图片。