Question

我遇到了包含链接的图片的问题。我有一个固定位置PNG，作为我网站的标题。此图片链接回我的主页。在其下滚动是一系列缩略图，您单击这些缩略图以查看完整图像。当您向下滚动以使缩略图位于标题PNG后面时，您无法再单击主页链接 - 而是点击后面缩略图的链接。

我觉得它与缩略图的翻转功能有关 - 因为它也使标题PNG半透明，这是不理想的。这是我的编码（从头开始编写代码的第一次尝试，所以道歉）：

 <!DOCTYPE html>

<html>

<head>
<title>Daniel Lewsley</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
</head>


<body>

<div id="header">
<a href="index.html"><img src="img/daniellewsley-header.png" alt="Daniel Lewsley"></a>
</div>

<!--
<div>
 <ul class="nav">
 <li class="nav"><a class="nav" href="illustration.html">Illustration</a></li>
 <li class="nav"><a class="nav" href="design.html">Design</a></li>
 <li class="nav"><a class="nav" href="other.html">Other</a></li>
 <li class="nav"><a class="nav" href="info.html">Info</a></li>
 </ul>
</div>
-->

<div id="gallerycontainer">
<div id="gallery"><a class="rollover" href="img/15.png"><img src="img/gallerythumb15.png" alt="Thumbnail"></a></div>
<div id="gallery"><a class="rollover" href="img/14.png"><img src="img/gallerythumb14.png" alt="Thumbnail"></a></div>
<div id="gallery"><a class="rollover" href="img/13.png"><img src="img/gallerythumb13.png" alt="Thumbnail"></a></div>
<div id="gallery"><a class="rollover" href="img/12.png"><img src="img/gallerythumb12.png" alt="Thumbnail"></a></div>
<div id="gallery"><a class="rollover" href="img/11.png"><img src="img/gallerythumb11.png" alt="Thumbnail"></a></div>
<div id="gallery"><a class="rollover" href="img/10.png"><img src="img/gallerythumb10.png" alt="Thumbnail"></a></div>
<div id="gallery"><a class="rollover" href="img/09.png"><img src="img/gallerythumb09.png" alt="Thumbnail"></a></div>
<div id="gallery"><a class="rollover" href="img/08.png"><img src="img/gallerythumb08.png" alt="Thumbnail"></a></div>
<div id="gallery"><a class="rollover" href="img/07.png"><img src="img/gallerythumb07.png" alt="Thumbnail"></a></div>
<div id="gallery"><a class="rollover" href="img/06.png"><img src="img/gallerythumb06.png" alt="Thumbnail"></a></div>
<div id="gallery"><a class="rollover" href="img/05.png"><img src="img/gallerythumb05.png" alt="Thumbnail"></a></div>
<div id="gallery"><a class="rollover" href="img/04.png"><img src="img/gallerythumb04.png" alt="Thumbnail"></a></div>
<div id="gallery"><a class="rollover" href="img/03.png"><img src="img/gallerythumb03.png" alt="Thumbnail"></a></div>
<div id="gallery"><a class="rollover" href="img/02.png"><img src="img/gallerythumb02.png" alt="Thumbnail"></a></div>
<div id="gallery"><a class="rollover" href="img/01.png"><img src="img/gallerythumb01.png" alt="Thumbnail"></a></div>
</div>

</body>

</html>

CSS：

body
{
background-color:white;
font-family:"Arial", arial, sans-serif;
font-size:0.875em; /*16px is 1em */
text-align:center;
margin:0 auto;
padding:0;
min-width:400px;
}

#header
{
font-size:0;
letter-spacing:0;
word-spacing:0;
background-color:white;
position:fixed;
/* margin:0 auto;
width:100%; */
}

ul.nav
{
list-style-type:none;
margin:5px;
padding:0;
overflow:hidden;
}
li.nav
{
display:inline-block;
}
a.nav
{
display:block;
width:100px;
background-color:#dddddd;
text-decoration:none
}

#gallerycontainer
{
padding:40px 0 0 0;
text-align:center;
font-size:0;
letter-spacing:0;
word-spacing:0;
}

#gallery
{
background-color:black;
width:400px;
height:300px;
display:inline-block;
}

a.rollover:hover
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

关于我做错了什么的想法？

Answer 1

您可以在CSS中设置z-index。如果您将标题图片的z-index设置为-1，它将被发送到后台，您可以点击缩略图。

当另一个链接图像位于下方时，无法使用链接单击固定图像

1 个答案: