我有一个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”属性?但我不确定。
这个问题有一个简单的解决方法吗? 请帮忙......
答案 0 :(得分:0)
该链接无法点击,因为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>