将链接放入图像中

Question

1. 我想要一张应该可点击的图片作为链接。 （这很容易，但是有问题。）

2. 图像应向上移动，顶部/边缘顶部（=向负方向）。

我尝试了很多不同的命令：

<a><img><div><span> ...

问题是每次我向上移动图片时，链接的可点击区域都不会向上移动。我该如何解决这个问题？

Answer 1

HTML

<a href="#" class="image-w"><img src="http://placekitten.com/300/200" alt="" /></a>

CSS

a {
    display: block; /* this has to be block to house things - otherwise it's just inline - now it's like a div and an anchor link*/

    margin-top: -3em; /* why? */
}

this fiddle

中的更多细节

Answer 2

据我了解，您希望能够使用<a>属性在链接（margin-top）内向上移动图像。这只能在块元素上实现，但是这是一个很好的小选项，名为 inline-block 。这是一种展示形式。

将图像的显示属性设置为内联块，将margin-top设置为某个负数，即可实现此目的。

img
{
    display: inline-block;
    margin-top:-40px;
}

JSFiddle

---

这样做的好处是，它允许您控制元素与其他对象（文本，其他内联块等）内联，同时仍然可以自由移动它。如果您使用display:block，它仍然可以使用，但图片必须位于其自己的行上。

---

编辑：

这也可以使用相对定位来完成。通过使用相对定位，您不必符合对齐和线条;它只是移动图像：

img
{
    position: relative;
    top: -40px;
}

注意：如果您使用的是位置，则应将z-index属性定义为大于0，这样图像始终位于其他所有位置之上。

JSFiddle

Answer 3

我建议使用jquery
  如果你使用jquery你可以删除锚标签
例如：如果您的图像ID为“image1”，则可以使用此代码设置onclick事件

$('#image1').on('click',function(){
 window.location.href="file.html";
 });

Answer 4

它在html中适用于我。

<a href="default link">
<img src="smiley.gif" alt="HTML tutorial" width="42" height="42">
</a>