如何显示图像右上角的删除按钮? [英] how to show delete button in top right corner of Image?
本文介绍了如何显示图像右上角的删除按钮?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在右上角显示删除按钮以显示图像?
我怎么能做到这一点?
我的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: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/
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 button something like this :
解决方案
Usual approach with position: relative
and position: absolute
.
HTML:
<div class="img-wrap">
<span class="close">×</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/
这篇关于如何显示图像右上角的删除按钮?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文