Question

奇怪的问题 - 我正在尝试使用以下代码制作图像超链接：

<html>
    <head>
        <title>
            Title doesn't matter cause this will be fullscreen
        </title>

<!--links with sytlesheet-->
  <link rel="stylesheet" type="text/css" href="stylesheet.css">

    </head>

<body>
    <div id="bg">
        <img src="images/zorin background.png" id="bgimage" height="200px">
    </div>

<a href="http://www.google.com"> 
 <img class="center" border="0" src="images/thumb1_2.png">  <!-- THIS IMAGE SHOULD BE A LINK -->
</a>

<img class="centerright" src="images/thumb2_2.png">
<img class="centerleft" src="images/thumb5_2.png">

<img class="arrowright" src="images/arrowright.png"> 
<img class="arrowleft" src="images/arrowleft.png">  



</body>
</html>

但是，当我删除'class =“center”'部分时，图像只能在Web浏览器中单击，否则，在此配置中，它不起作用。这是相应的css：

/* all of this is just to make the bg image on the homepage resize properly :P */

#bgimage {

max-width: 100%

}

#bg{

max-width: 100%

} 

#bgimage {
    position:fixed;
    _position:absolute; /*target IE6 only */
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index: -3;
}

/* end of resizing image stuff */


/* centers main image */
.center {
   width: 50%;
  /* height: 300px; */
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -25%;
   margin-top: -150px;
   z-index: -2;
}


/* deals with right image */
.centerright {
   width: 24%;
  /* height: 300px; */
   position: absolute;
   left: 100%;
   top: 60%; 
   margin-left: -12%;
   margin-top: -150px;
   z-index: -3;
}

/* deals with right arrow*/
.arrowright {
   width: 18%;
 /*  height: 300px; */
   position: absolute;
   left: 88%;
   top: 60%; 
   margin-left: -12%;
   margin-top: -150px;
   z-index: -3;
}


/* deals with left image */
.centerleft {
   width: 24%;
  /* height: 300px; */
   position: absolute;
   left: 0%;
   top: 60%; 
   margin-left: -12%;
   margin-top: -150px;
   z-index: -3;
}

/* deals with left arrow*/
.arrowleft {
   width: 18%;
 /*  height: 300px; */
   position: absolute;
   left: 18%;
   top: 60%; 
   margin-left: -12%;
   margin-top: -150px;
   z-index: -3;
}

Answer 1

使z-index成为一个问题。即使它相对于其他所有内容都可见，但出于某种原因，它只会激活具有正z-index的超链接

应用css属性时，HTML图像不会超链接

1 个答案: