Question

我有这个容器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/

虽然它不会干扰内容，但您可以在背景图层中看到红色背景

在透明div上覆盖一个实心div

1 个答案: