将图像变成链接不会起作用

Question

所以我在将图像列表制作成工作链接时遇到了一些困难。这是一个如何在我的HTML中解决它们的示例：

<a href="plantvb1.html" class="plant1"><img src="img/plnt1_.png"></a>

然后在我的CSS中引用它们：

a.plant1 {
    position: absolute;
    z-index: 1;
    left: -20%;
    width: 50%;
    top: -20%;
}

现在，问题是，当我把'a'放在我的CSS部分前面时，我的图像消失了...但是当我没有'a'时，它没有链接。

Answer 1

试试这个

.plant1 {
    position: absolute;
    z-index: 1;
    left: -20%;
    width: 50%;
    top: -20%;
}

<a href="plantvb1.html" ><img src="img/plnt1_.png" class="plant1"></a>

Answer 2

这里的错误是定位：

a.plant1 {
    position: absolute;
    z-index: 1;
    left: -20%;
    width: 50%;
    top: -20%;
}

将你的链接放在你的视口之外（或者至少在父元素之外可能隐藏溢出的孩子），我创建了一个小提琴，你可以看到： http://jsfiddle.net/3ajrw1yg/

所以，你需要重新考虑你想要实现的位置，并相应地改变你的css。

Answer 3

你没有给它高度，当你有绝对位置时，你必须定义你的尺码，试试这个：

a.plant1 {
    position: absolute;
    z-index: 1;
    left: -20%;
    top: -20%;
    width: 50%;
    height: 100px;
}

如果您不使用HTML5，则还应关闭IMG标记

<a href="plantvb1.html" class="plant1">
    <img src="img/plnt1_.png" />
</a>