图像顶部的可点击图像答案

【问题标题】：A clickable image on top of an image图像顶部的可点击图像
【发布时间】：2011-12-06 20:45:06
【问题描述】：

我有一个页面，我们可以在网格视图中看到许多图像（如）

我希望用户能够删除它们；我想在每张图片的右上角放一个小 X 图像。最好的方法是什么？

我尝试使用 Image Map，但无法设置图像，只能设置链接。

【问题讨论】：

标签： html php image

【解决方案1】：

您必须将其放置在原始图像上。这是一个简单的例子：

http://jsfiddle.net/QPr5U/1/

我制作了一个图标列表，其中每个图像都在它自己的li 元素中。它可以是 div 或其他任何东西，只要每个图像都被另一个元素包裹，并且列表在语义上是最正确的。与每张图片一起的是一个宽度和高度为 16px 的链接和一个十字的背景图片。

诀窍是图像周围的元素有一个position: relative。这意味着li 元素内的任何具有位置的东西都相对于li 的边界。因此，如果我现在给 .cross 元素一个 position: absolute，其顶部和右侧的值为 2px，这意味着十字架将位于距离列表项的顶部和右侧 2px 处。

我做的最后一件事是给li 项目display: inline-block，这样它们就不会跨越页面的整个宽度，而只是它们内部内容的宽度。如果你知道每张图片的宽度，你也可以给li一个固定的宽度。

希望这会有所帮助！

【讨论】：

【解决方案2】：

将单个图像保留为任何div 的背景图像，然后在该div 上设置十字图像

【讨论】：

语义上不正确，因为实际图像是内容，应该在img 标签中。然而，十字是布局，应该设置为链接的背景。