Question

我有一个html页面，在body标签中有一个完整的背景图片，然后是一个包装器： <body> <a href="#" id="bkimage">Background Image</a> <wrapper> .................

样式：

#bkimage {
position: fixed;
background: url('images/bk.jpg') no-repeat top center;
width: 100%;
height: 1240px;
z-index: -1;
display:block;
overflow:hidden;
text-indent:100%;
white-space:nowrap;
}
#wrapper {
margin: 0 auto;
width: 960px;
background: url('images/transpBlack25.png');

}

这个想法是让背景图像可以点击。但是我们需要在#wrapper中保留网页的完整内容。 body和wrapper标签已经有其他背景图片。

此方法无效。我想这可能是因为包装有“margin：0 auto”属性？但我不确定。

这个问题有一个简单的解决方法吗？请帮忙......

Answer 1

该链接无法点击，因为z-index:-1将其设置在页面上所有其他元素的后面。如果某些东西在后台，并且前面还有其他东西，则指向背景元素的所有点击将最终落在直接位于其前面的元素上。如果你试图让整个页面像一个巨大的链接，你可以将所有内容都包含在锚标记中。

<style>
#bkimage {
    position: fixed;
    top:0;
    left:0;
    background: url('images/bk.jpg') no-repeat top center;
    width: 100%;
    height: 1240px;
    display:block;
}
#wrapper {
    margin: 0 auto;
    width: 960px;
    background: url('images/transpBlack25.png');
}
</style>

<body>
    <a href="" id="bkimage">
    <div id="wrapper">content</div>
    </a>
</body>

HTML：由于包装器，页面背景图像链接无法正常工作

1 个答案: