Question

在我的网页中，我使用以下代码设置了图像链接/锚点：

<div class="bg_1">
        <div class="Absolute-Center">
            <span style="font-size: 50px; color: aqua">in short.</span><br />
            LIVE LIFE AT YOUR OWN PACE.<br /><br /><br /><br /><br /><br /><br />
            <a href="#home1"><img src="images/scrolldown.png" width="50" height="50" border="0" /></a>
        </div>
    </div>
    <div style="height: 100vh; background-color: black;" >
        <a name="home1"></a>
    </div>

然而，当我运行我的页面时，这个图像似乎不是可点击的，当你点击时它也不会带你到任何地方。有任何想法吗？如果它有所不同，我使用的图像大多是透明的修改
我把问题缩小到由z-index引起的。＆＃34; bg__1＆＃34;的CSS代码如下：

.bg_1 {
    height: 100vh;
    position: relative;
    z-index: -1;
    background-position: center center;
    background-size: cover;
    background-image: url(http://31.media.tumblr.com/2c3a72acc53b1a78ef3b6c4986604cd2/tumblr_ni0jt8sKlY1sr6759o1_500.gif);
}

删除z-index行可以解决问题但是我的布局需要z-index。

Answer 1

它可能是由于正文元素覆盖了您的链接而发生的。只需减小body元素的z-index属性即可。

Answer 2

如果没有看到页面的布局，很难找到修复程序。但是，你几乎没有可能：

更改页面布局
从css styles中删除z-index: -1
找到与您的图片重叠的元素，并为其添加pointer-events: none样式。然后，点击事件将传递到图像。
更改与图像重叠的元素z-index，并将其设为较低的z-index值

Answer 3

我发现了我的错误。如果图像链接包含在具有负z-index的div或块中，则它们将变为无响应。因此，不要将其呈现为负值而不是默认值。保持其容器处于默认状态，并提高您希望它在后面渲染的z-index。

图片链接不起作用

3 个答案: