-2

背景画像があるWebページを作成したいのですが、その上に画像のプレースホルダーがあり、ユーザーがクリックして写真をアップロードすると、その写真がその背景画像に配置されます（ユーザーがアップロードした画像を使用してズームインのサイズ変更）。

だから私の質問は：

  1. 背景画像の上に円などの空白スペースを作成するにはどうすればよいですか。これを使用してページに背景画像を作成しました。

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

  2. 上記で作成したそのスペースに、ポップアップを開いてユーザーが画像をアップロードできるようにするリンクの並べ替えが必要であり、その画像は作成されたスペース(円)に表示されます。

jqueryを使用してモーダルフォームを開き、phpを使用して画像をアップロードする方法を知っています。画像のプレースホルダーを作成する方法を教えてください。また、アップロード後にその画像をプレースホルダーに配置する方法を教えてください。

jqueryとHTMLが苦手です。彼のことであなたの助けに感謝します。

4

1 に答える 1

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/

于 2012-10-18T04:51:23.573 に答える