0

写真のウェブサイトの背景画像を思い通りに表示するのに最適な方法を見つけました。（stackoverflowの投稿を検索することにより）

私は自分のコードで以前持っていたものを取り出し、それをいくつかのマイナーな編集で見つけたものに置き換えました。ただし、メニューなどは正しく機能しなくなりました。

元。私のページの上部にあるリンクはクリックできません。

背景がページ全体を覆っていると思います。それが理由です。コードから「background」DIVを削除しようとしましたが、すべてが再び機能しましたが、背景画像が配置されなくなり、希望どおりに使用されました。

Z-Indexに関連していると思います。誰かが私がこれを修正するのを手伝ってもらえますか？そして、なぜそれが起こっているのかを教えてください。そうすれば、コードでそれ以上のことをするのを避けることができます。

これがJsFiddleです（簡単に表示/編集できます） http://jsfiddle.net/3kke4/

body, html{
    font-size:11px;
    font-family:Verdana,Helvetica,Arial,sans-serif;
    margin  : 0px;
    padding : 0px;}

#background{
    position    : absolute;
    top         : 0px;
    left        : 0px;
    overflow    : hidden;
    width       : 100%;
    height      : 100%;
    font-weight : bold;
    font-size   : 30px;}

.cover{
    position : absolute;
    width    : 100%;
    top      : 0px;
    z-index  : -1;} 

#container{
    display:block;
    clear:both;
    text-align: center;
    padding-top:40px;
}
.thumb{
    text-align:left;
    display:inline-block;
    margin:5px;
    padding:10px;
    background-color:rgba(102,102,102,0.5);}

#menu{
    top:0;
    left:0;
    margin:0;
    padding:0;}

#menu ul{
    list-style-type:none;
    left:0;
    right:0;
    position:absolute;
    display:block;
    height:33px;
    margin:0;
    padding:0;
    top:0;
    left:0;}

#menu li{
    display:block;
    float:left;
    margin:0;
    padding:0;}

#menu li a{
    float:left;
    color:#A79787;
    text-decoration:none;
    height:24px;
    padding:9px 15px 0;
    font-weight:normal;}

#menu li a:hover{
    color:#fff;
    background-color:rgba(102,102,102,0.5);
    text-decoration:none;}

#toggle a{
    float:right;
    color:#A79787;
    text-decoration:none;
    height:24px;
    padding:9px 15px 0;
    font-weight:normal;}

#toggle a:hover{
    color:#fff;
    background-color:rgba(102,102,102,0.5);
    text-decoration:none;}

<body>
<div id='background'>
    <img src='http://i.imgur.com/9dOAPlS.jpg' class='cover'/>
</div>
<div id='navigation'>
    <div>
    <ul id='menu'>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Albums</a></li>
        <li><a href='#'>Contact</a></li>
    </ul>
    </div>
    <div id='toggle'>
        <a href='#'>Hide All</a>
    </div>       
</div>
<div id='container'>

</div>

</body>
4

1 に答える 1

2

次のスタイルを変更します（z-indexから.coverに移動しました#background）。

#background{
    position    : absolute;
    top         : 0px;
    left        : 0px;
    overflow    : hidden;
    width       : 100%;
    height      : 100%;
    font-weight : bold;
    font-size   : 30px;
    z-index : -1;}

.cover{
    position : absolute;
    width    : 100%;
    top      : 0px;}

何かがabsolutelyに配置されると、それは他の要素の上に配置されます。したがって、あなたの場合は、をオンにすることでそれを相殺しようとしz-indexました.cover。.coverはの子であるため、これは機能しません#background。したがって、z-indexは相対的です#background（すでに他のすべての上にあります）。

于 2013-03-27T01:14:14.313 に答える