加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

在图片上加入删除按钮

发布时间:2020-12-14 23:56:42 所属栏目:资源 来源:网络整理
导读:在Web开发中,有时候我们会遭遇这样的场景,我们给用户提供了批量上传的便捷功能,但是不可避免地是用户可能会选错图片,当一批图片已经上传并成列出来时,用户想删除图片却不知点哪里,也许用户会刷新让其眼不见为净,但可能导致用户之前的操作都统统白费。

在Web开发中,有时候我们会遭遇这样的场景,我们给用户提供了批量上传的便捷功能,但是不可避免地是用户可能会选错图片,当一批图片已经上传并成列出来时,用户想删除图片却不知点哪里,也许用户会刷新让其眼不见为净,但可能导致用户之前的操作都统统白费。

我认为较好的方法是在用户上传完图片时为每一张图片加上删除按钮,这个问题用CSS的层叠加就可以解决了。

下面,我提供一张图片的四个角落的删除按钮显示方式。

首先提供两张样例图片:

然后看看我们最终的显示效果(如果显示位置不太准确,可能是和博客园的CSS冲突)

  • 要被覆盖的片

  • 要被覆盖的片

  • 要被覆盖的片

  • 要被覆盖的片

html,css代码很简单,主要三样东西:z-index,position和margin