0

http://jsbin.com/opopup/2/edit

このリンクを表示すると、#headerdiv 内にナビゲーション メニューが埋め込まれていることがわかります。ヘッダーは単にナビゲーションを中央に配置し、背景色と画像を提供するためにあります。背景画像の上に背景色を持つ「固定」ヘッダーを実現しようとしています。私はそれを正しく理解できないようです.z-indexとカスケードで遊んで運がありません. 助言がありますか？

の位置を「絶対」にすればちゃんと表示できる#header

編集

申し訳ありませんが、ここは jsfiddle です。jsbin でライブ編集が可能だとは知りませんでした

http://jsfiddle.net/NuBUV/

4

3 に答える 3

0

JanR が述べたように、この問題は、ヘッダー要素の子である div に由来します。次のように、色と画像がオンになっている要素を交換できます。

.blurry {
    background:url('http://colourlovers.com.s3.amazonaws.com/blog/wp-content/uploads/2008/09/colorful_by_souhail88.jpg') 50% 0 no-repeat fixed;
}
.one { 
    background-color:rgba(255,255,255,.5);
    left:0;right:0;top:0;bottom:0;
    position:absolute;
}

または、.one の後に別の div を追加し、同様の絶対スタイルを使用して色を上に重ねます。

最初のケースでは、.one 要素が親要素 (.blurry) の画像背景をオーバーレイします。2 番目のケースでは、別の div に続く div が両方とも position:absolute; である場合、同じ効果があります。

于 2013-06-13T03:22:14.787 に答える