关注我

在图片上加入删除按钮

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

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

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

首先提供两张样例图片：

cancelDesert

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

  • 要被覆盖的片
  • 要被覆盖的片
  • 要被覆盖的片
  • 要被覆盖的片

 

 

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#image_list {
	list-style:none;
}
#image_list li {
	float: left;
	width: 60px;
	height: 60px;
	padding: 3px 5px 0 5px;
}
.demo-image {
	width:60px;
	height:60px;
}
.demo-image-top-left {
	position:relative;
	z-index:2;
	margin-top:-60px;
	color:#f00;
	background: #eeeeee;
	width:16px;
	height:16px;
}
.demo-image-top-right {
	position:relative;
	z-index:2;
	margin-top:-60px;
	margin-left: 44px;
	color:#f00;
	background: #eeeeee;
	width:16px;
	height:16px;
}
.demo-image-bottom-left {
	position:relative;
	z-index:2;
	margin-top:-16px;
	color:#f00;
	background: #eeeeee;
	width:16px;
	height:16px;
}
.demo-image-bottom-right {
	position:relative;
	z-index:2;
	margin-top:-16px;
	margin-left: 44px;
	color:#f00;
	background: #eeeeee;
	width:16px;
	height:16px;
}
</style>
</head>
<body>
<ul id="image_list">
  <!--上左-->
  <li>
    <div> <img class= "demo-image" src= "http://203.169.239.169/images/Desert.jpg" alt= "要被覆盖的片 " title= "要被覆盖的片 " /> </div>
    <div class= "demo-image-top-left"><a href="" title="删除图片"><img src="http://203.169.239.169/images/cancel.png" /></a></div>
  </li>
  <!--上右-->
  <li>
    <div> <img class= "demo-image" src= "http://203.169.239.169/images/Desert.jpg" alt= "要被覆盖的片 " title= "要被覆盖的片 " /> </div>
    <div class= "demo-image-top-right"><a href="" title="删除图片"><img src="http://203.169.239.169/images/cancel.png" /></a></div>
  </li>
    <!--下左-->
  <li>
    <div> <img class= "demo-image" src= "http://203.169.239.169/images/Desert.jpg" alt= "要被覆盖的片 " title= "要被覆盖的片 " /> </div>
    <div class= "demo-image-bottom-left"><a href="" title="删除图片"><img src="http://203.169.239.169/images/cancel.png" /></a></div>
  </li>
  <!--下右-->
  <li>
    <div> <img class= "demo-image" src= "http://203.169.239.169/images/Desert.jpg" alt= "要被覆盖的片 " title= "要被覆盖的片 " /> </div>
    <div class= "demo-image-bottom-right"><a href="" title="删除图片"><img src="http://203.169.239.169/images/cancel.png" /></a></div>
  </li>
</ul>
</body>
</html>

posted @ 2011-12-18 19:53  keepfool  阅读(2026)  评论(1)  编辑  收藏  举报