html - Position of non-transparent div on a transparent div issue

Question

嗨，我正在用 mvc4 做我的元素。在我的布局页面中，我有一个透明的 div(#wrapper)，最重要的是我有许多非透明的 div。为此，我使用了以下 css 和 html 代码。

<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)中的位置不正确。它们不显示在包装器 div 内。我怎样才能纠正他们的立场。

Answer 1

这是我发现的作品。使用 div 设置高度、宽度、填充和其他格式选项。然后是一个类元素来设置任何颜色、透明度和其他修饰。使类透明使用

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

如果您将代码也放入“#wrapper”div 中，该代码也应该可以工作。前三位小数是颜色，最后一位是对象的不透明度。此外，“1.0”或 1 等于 100%，这就是我使用 0.5 的原因