javascript - 自定义产品照片

Question

所以我正在从事一个客户提供定制交易卡的元素。我遇到的问题是能够以允许用户上传出现在特定框中的照片的方式覆盖卡片模板。

我尝试过 iframe 方法，我尝试过使用 2 个 div 并使用 z-index 进行叠加，我已经购买了 2 个产品定制器选项，但都没有完成我想要做的事情。

这是我需要的非常基本的图像:

Concept Example Photo

Answer 1

只是例子，简单的代码

JSFIDLE

现在，如果您可以发布完整代码，我们可以进一步帮助您。

<div class="one">
Template area
</div>
<div class="two">
Template area
</div>
<div class="three">
Template area
</div>

CSS:
.one{
  position:relative
  width:100%;
  height:100px;
  background:url('http://pokit.org/get/img/20c0eb36b19b3006b310f5834a9f818f.jpg') NO-REPEAT;
}

.two{
  width:250px;
  height:50px;
  background-color:blue;
  position:absolute;

}
.three{
  margin-top:20px;
  position:relative;
  width:100%;
  height:100px;
  background:url('http://pokit.org/get/img/b90d68274639145e23102320e602afaa.jpg') no-repeat;
}