php - 使用 php、jquery 在图像中创建一个空间以在其上放置另一个图像

Question

我想创建一个网页，其中有一个背景图像，并且在该网页上有一个图像的占位符，用户可以在其中单击并上传照片，并且该照片将被放置在该背景图像上（用户上传的图像可以调整放大的大小）。

所以我的问题是：

1. 如何在背景图像顶部创建一个空白区域，例如一个圆圈，我使用以下方法在页面上创建了背景图像：

   <div style="background-image: url(bg.jpg); height: 400px; width: 800px; border: 1px solid black;">
   

2. 我希望在上面创建的空间中有一个链接类型，该链接将打开一个弹出窗口，让用户上传图像，并且该图像将在创建的空间（圆圈）中可见。

我知道如何使用 jquery 打开模态表单，并使用 php 上传图像。请指导我为图像创建占位符，然后在上传后如何将该图像放置在占位符中。

我不擅长 jquery 和 HTML。因此，感谢您对他的帮助。

Answer 1

CSS：

* {font-family: "Segoe UI", Tahoma;}
p {margin: 0 0 15px;}
.frame {background: url("http://www.vector-eps.com/wp-content/gallery/floral-frames-vectors/floral-frames-vectors4.jpg") center center no-repeat; width: 400px; height: 314px; position: relative;}
.frame img {position: absolute; width: 150px; height: 100px; top: 100px; left: 125px; border: 1px solid #ccc;}​

HTML：

<p>Say you have something like this:</p>

<div class="frame">
    <img src="http://i48.tinypic.com/dmb47t.jpg" />
</div>​

jQuery

一开始会有一个空<img />标签。使用 jQuery，上传后，您可以这样设置值：

$(".frame > img").attr("src", "image-url");

截屏：

小提琴：http: //jsfiddle.net/UUtyQ/