css - 在透明 div 上覆盖实心 div

Question

我有这个容器 div，里面有两个 div，容器是透明的，但另外两个不是，所以我搜索了它，发现我不能把两个实心 div 放在透明的 div 中，我应该使用3 个不同的 div 并使用它们的位置属性来覆盖它们，而且我希望我的 div 位于我的页面的中心，但我做不到，请看看我的代码:

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<br />
<div class="trans1" style=" text-align: center; font-size: large; font-family: 'Hobo Std'; font-style: italic; font-variant: normal; height: 500px; z-index: 9999">
</div>
<div style="border: solid 1px black; float: left; width: 400px; margin-left: 15px; height: 426px; position: absolute">
</div>
<div style="border: solid 1px black; float: left; width: 400px; margin-left: 10px; height: 426px; position: absolute">
</div>

和我的 CSS 代码:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<style>
    .trans1 {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
        filter: alpha(opacity=90);
        -moz-opacity: 0.9;
        -khtml-opacity: 0.9;
        opacity: 0.9;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
        height: 458px;
        position: relative;
        width: 860px;
        border: thick solid #000066; 
        background-color: #666666; 
        margin: 0 auto; 
        width: 873px;
    }
</style>

注意:这是一个从母版页继承的网页。

Answer 1

这就是我要做的。 HTML:

<div class='container'>
    <div class='background'></div>
    <div class='content'>Hey</div>
</div>

CSS:

body, html {
    width: 100%;
    height: 100%;
    background: red;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.container {
    width: 100%;
    height: 100%;
    position: relative;
}
.background {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    -moz-opacity: 0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    height: 100%;
    position: absolute;
    width: 100%;
    border: thick solid #000066;
    background-color: #666666;
    margin: 0 auto;
}
.content {
    position: absolute;
    width: 50%;
    height: 50%;
    left: 50%;
    top: 25%;
    background: white;
    margin-left: -25%;
}

JSFiddle:http://jsfiddle.net/Hive7/T3SZx/

虽然不影响内容，但可以透过背景层看到红色背景