不透明的身體背景越過固定標題

我有一個固定的標題。當我的身體背景是純色時，一切正常 - 正文文本位於標題下方。如果我讓身體背景變得不透明，那麼身體就會越過標題而不是下面的標題。導航欄和徽標等位於「headContent」div中。不透明的身體背景越過固定標題

<body> 
    <div id="headContent"> 
    </div> 
    <div id="content"> 
     <p>Content stuff.</p> 
    </div> 
    </div> 
</body>

標題代碼是在一個單獨的文件，所以我有PHP鏈接到它。因此，該標題下無二包含div內容的CSS：

#content{ 
    padding-top: 140px; 
    background-color: red; 
}

但只要我添加不透明度的內容越過頭：

#content{ 
    padding-top: 140px; 
    background-color: red; 
    opacity: 0.4; 
}

看起來很簡單。我試過使用z-index。有任何想法嗎？

來源

2015-10-17 Mermaid

請張貼一個完整的代碼示例。另外，'z-index'只適用於定位（即非靜態）元素。 – j08691

[小於'1'的不透明度會創建一個新的堆棧上下文]（https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context） - 這就是解釋爲你的問題。如果頭文件已經被修復，那麼簡單地添加一個'z-index'就可以解決這個問題。 – CBroe

這解決了我的問題。 – Mermaid

嗨，你可以嘗試在你的CSS中添加以下，而不是不透明度，你可以嘗試做這樣的

#content{ 
padding-top: 140px; 
background: rgba(255,0,0,0.5); 
}

來源

2015-10-17 21:09:55 RiaanV

這也解決了我的問題。 – Mermaid

很高興我可以幫助介意投票有幫助嗎？ – RiaanV

不透明的身體背景越過固定標題

回答

相關問題