Question

我正在尝试使用http://xavisys.com/css-trick-turning-a-background-image-into-a-clickable-link/#comment-28009上的教程链接我的背景图片，但这对我不起作用。

我认为我有正确的CSS，但是当我插入html来建立链接时，它将我的整个网站设置为一个巨大的链接。有没有办法在我的内容后面建立链接层，这样只能在容器的两侧点击？

我尝试过使用这个css：

body {
    background-image: url('images/bg.png'); 
    background-position: center top;
    background-attachment: fixed;
    }

body #background-link {
position: absolute;
height:11000px;
text-indent:-9999px;
width:1440px;
top: 0; left: 0;
border: 0;
float: left;
}

和这个html：

<a href="http://url.com" title="Title" id="background-link">the link</a>

Answer 1

您需要设置站点容器的z-index，使其高于锚点链接。这样做的简单方法 -

添加此CSS：

#wrapper{position:relative;z-index:10;}
#background-link{z-index:1}

这是HTML：

<a href="http://url.com" title="Title" id="background-link">the link</a>
<div id="wrapper">
    all of your site code goes here
</div>

Answer 2

position:absolute让你的链接保持在前面。你可以尝试z-index，但更容易判断我是否可以看到你是完整的代码？或页面链接？

链接背景图像

2 个答案: