Css 将实体div覆盖在透明div上

我有一个容器div，其中有两个div，容器是透明的，但其他两个不是，所以我搜索了它，发现我不能将两个实体div放在透明的一个中，我应该使用3个不同的div，并使用它们的position属性来覆盖它们，而且我希望我的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>

.trans1{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=90）”；
过滤器：α（不透明度=90）；
-moz不透明度：0.9；
-khtml不透明度：0.9；
不透明度：0.9；
-webkit边界半径：30px；
-moz边界半径：30px；
边界半径：30px；
高度：458px；
位置：相对位置；
宽度：860px；
边框：厚实线#000066；
背景色：#666666；
保证金：0自动；
宽度：873px；
}

---

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

我会这样做。HTML:

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

JSFiddle：

---

您可以通过背景层看到红色背景，尽管它不会干扰内容

，但在放大和缩小时，我们是否可以停止调整div的大小？不要使用百分比放大和缩小时，位置将发生变化使用百分比对齐，使用像素调整大小

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%;
}