本文介绍了如何显示图像右上角的删除按钮?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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



我的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/

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

09-02 13:27