jquery - 画像の右上隅に削除ボタンを表示する方法は?

Question

画像の右上隅に削除ボタンを表示したいですか? どうすればこれを達成できますか?

私のhtmlは次のようなものです:-

メイン画像：

<img id="' + id + '" src="../Images/DefaultPhotoMale.png" class="' + item + '" width="40" height="40" alt="image" title="' + projectTitle + '" style="cursor:pointer" />

上の画像の右上に表示する×ボタンの画像

• '<img id="' + item.Soid + '" src="../Images/RemoveButton.ico" style="display:none" title="Remove Specialization" />

背景画像を設定しないでください。次のような削除ボタンのクリック イベントが必要です。

Answer 1

position: relativeとを使用した通常のアプローチposition: absolute。

HTML:

<div class="img-wrap">
    <span class="close">&times;</span>
    <img src="http://lorempixel.com/100/80">
</div>

CSS:

.img-wrap {
    position: relative;
    ...
}
.img-wrap .close {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 100;
    ...
}

拡張デモ (+ JS インタラクション) http://jsfiddle.net/yHNEv/

Answer 2

次のようなものを試してください

<div style="position: relative">
    <img src="http://www.google.co.in/images/srpr/logo4w.png" />
    <img src="http://wecision.com/enterprise/images/icons/closeIcon.png" style="position: absolute; top: 4px; right: 5px"/>
</div>

デモ：フィドル

Answer 3

私はあなたのために1つをコーディングしましたhttp://jsfiddle.net/PPN7Q/

画像をDIVでラップする必要があります

<div class="thumbnail">
<img src="http://96pix.com/images/renee-v.jpg" />
 <a href="">Delete</a>
</div>

次のCSSルールを適用します

.thumbnail {
width:50px;
height:50px;
position:relative;
}

.thumbnail img {
max-width:100%;
max-height:100%;
}

.thumbnail a {
display:block;
width:10px;
height:10px;
position:absolute;
top:3px;
right:3px;
background:#c00;
overflow:hidden;
text-indent:-9999px;
}

Answer 4

あなたはこれを試すかもしれません：

<div style="position:relative; width:'mainimagewidth'">
main image<img src="" />
<span style="position:absolute; top:0; right:0;">ximage<img src="" /></span>
</div>

Answer 5

style="position:absolute;top:0px;right:0px;"私の意見では、 forRemoveButton.icoとstyle="position:relative;"fordivを設定するだけですimg

Answer 6

<div style=" float: right;margin-left: 289px;position: absolute;">*</div>
<img src="score.png" width="300" height="300" />

これを試してください。それは役立つかもしれません。