非透明div在透明div問題上的位置

嗨，我正在做我的項目在mvc4。在我的佈局頁面中，我有一個透明的div（#wrapper），並且我有很多非透明的div。我使用下面的CSS和HTML代碼。非透明div在透明div問題上的位置

<div id="wrapper"> 
<div id="header"> 
    <div id="logo"></div> 
    <div id="navigation"></div> 
</div> 
<div id="content"> 
    @RenderBody() 
</div> 
</div>

CSS

#wrapper { 
position:relative;} 

#wrapper:before { 
margin-left:12%; 
width:76%; 
background-color:#6c88b6; 
content:''; 
min-height:400px; 
height:auto; 
overflow:hidden; 
position:absolute; 
opacity:.5;} 

#header { 
position:relative; 
} 

#logo { 
margin-left:3%; 
margin-top:20px; 
margin-bottom:20px; 
display:inline-block; 
height:70px; 
width:300px; 
background:url(../Shared/Images/logo.png) no-repeat center left ; 
} 

#navigation { 
margin-left:1%; 
width:98%; 
background-color:#fff; 
height:50px; 
} 

#content { 
    position:relative; 
}

我的問題是，內部格在包裝（非透明的div）的位置是不正確的。它們不是在包裝div中顯示的。我如何糾正他們的立場。

來源

2013-10-28 neel

不清楚哪個div是透明和不透明的..... –

#wrapper是透明的。所有其他人都不透明 – neel

你想在僞元素之前實現什麼？ – davidpauljunior

這是我發現的作品。使用div來設置高度，寬度，填充和其他格式選項。然後是一個類元素來設置任何顏色，透明度和其他化妝品。使類透明使用

#class { 
background-color:rgba(108.136.182.0.5) 
}

該代碼也應該工作，如果你只是把它放到你的「#wrapper」div。前三位小數是顏色，最後一位是對象的不透明度。也是「1.0」或1等於100％，這就是爲什麼我使用0.5

來源

2014-07-30 17:32:57 Arkadain

非透明div在透明div問題上的位置

回答

相關問題