如何显示图像右上角的删除按钮？

问题描述

我想在右上角显示删除按钮以显示图像？
我怎么能做到这一点？

我的html是这样的： - $ / b>

main image：

 < img id ='+ id +'src =../ Images / DefaultPhotoMale.pngclass = '+ item +'width =40height =40alt =imagetitle ='+ projectTitle +'style =cursor：pointer/> 
  

x按钮图片显示在上方图片的右上方

• '< img id ='+ item.Soid +'src =../ Images / RemoveButton.icostyle =display ：nonetitle =删除专业化/>

点击这个删除按钮的事件
就像这样：

解决方案

常用方法 position：relative and 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互动）

i would like to show delete button at top right corner to image?how could i achieve this?

my html is like this :-

main image :

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

x button image to display in top-right of above image

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

No background image set please, i need click event for that delete buttonsomething like this :

解决方案

Usual approach with position: relative and 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;
    ...
}

Extended demo (+ JS interaction) http://jsfiddle.net/yHNEv/

这篇关于如何显示图像右上角的删除按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！