0

divタグには背景画像があり、メインタグの背景画像と残りのコンテンツの両方にオーバーレイを配置したいと思います。ただし、次のコードは、conentの上にオーバーレイタグを配置します。

HTML：

<div id="nav-section">
    <div class="overlay"></div>
    <div class="container">
        <p>test</p>
        <h5>test</h5>
    </div>
</div>

CSS：

#nav-section{
background-image: url('../img/1.jpg');
background-position: top center;
background-size: cover;
position: relative;
}

#nav-section .overlay{
position: absolute;
top: 0;
height: 100%;
width:100%;
background-color: rgba(0,0,0,0.9);
z-index: 1;
}

#nav-section .container{
height: 600px;
}

#nav-section .container ul li{
float: left;
}

前もって感謝します。

4

2 に答える 2

1

z-indexを使用します。

＃nav-section .container z-indexを指定します。これは、彼にオーバーレイさせたいdivよりも高くなります。

于 2013-01-20T09:16:45.030 に答える
1

オーバーレイ#nav-section .containerよりも高いz-indexを使用して、相対的または絶対的な位置を設定します。

于 2013-01-20T07:34:58.873 に答える