0

body タグ内に完全な背景画像があり、その後にラッパーが続く html ページがあります。 <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 内に Web ページの完全なコンテンツを保持する必要があります。body および wrapper タグには、すでに他の背景画像があります。

この方法は機能しません。「マージン：0自動」プロパティを持つラッパーが原因であると思いますか？しかし、よくわかりません。

この問題の簡単な回避策はありますか? 助けてください...

4

1 に答える 1

0

リンクはz-index:-1、ページ上の他のすべての要素の背後に設定されているため、クリックできません。何かが背景にあり、その前に何かがある場合、背景要素に向けられたすべてのクリックは、その前の要素に着地することになります。ページ全体を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>
于 2012-07-26T18:24:04.320 に答える