Question

我想显示一个div，哪个背景是透明的，透明度不会影响特定div的顶部。所以我使用以下html和css。

<div id="content">
    <div id="transparncy"></div>
    <div id="contentdata">
        <div id="left">
          <p></p>
        </div>
        <div id="right">
            <p></p>
         </div>
    </div>
</div>

的CSS

#content {
width:100%;
position:relative;  
color:#37475e;
}

#content #transparncy {
opacity:.4;
filter:alpha(opacity=40);  
-moz-opacity:0.4;   
background-color:Red;  
width:100%; 
min-height:250px; 
height:auto;
overflow:auto;
position:absolute;  
top:0px;  
left:0px;  
z-index:-1;
}

#contentdata {
position:relative;  
width:100%;
}

#left {
width:50%;
float:left;
}
#right {
float:right;
width:35%;
}

我的问题是，当我在#contentdata中添加更多数据时，我可以调整与此成比例的#transparncy的高度（不能增加背景透明div）。我怎么解决这个问题。请帮帮我

Answer 1

不是将新的空白div添加到透明度，而是将相同的类名称添加到id="contentdata" div并生成background: rgba( 255, 0, 0, 0.4);这不会对文本应用透明度，但仅适用于bg

<强> HTML

<div id="contentdata" class="transparncy">...</div>

<强> CSS

#contentdata .transparncy {  
    background: rgba( 255, 0, 0, 0.4); 
    width:100%; 
    min-height:250px; 
    height:auto;
    overflow:auto;
    position:absolute;  
    top:0px;  
    left:0px;  
    z-index:-1;
    border-radius:5px;
 }

<强> DEMO

Answer 2

正确答案更新小提琴（http://jsfiddle.net/JyZ67/8/）

主要问题是你没有正确使用<div id="transparncy"></div>

 <div id="transparncy">
          contentdatas....
    </div>

Answer 3

可以通过将bottom:0添加到CSS的#transparncy部分来解决此问题。

Answer 4

问题非常简单且与问题相关

你使用过最小高度：250px; 无论内/子比赛或div的高度是什么，在你的情况下父母div与min-height #content #transparncy将采取250px的最小高度

只需删除最小高度，我将作为高度自动工作：）

更新代码：

#content #transparncy {
opacity:.4;
filter:alpha(opacity=40);  
-moz-opacity:0.4;   
background-color:Red;  
width:100%; 
height:auto;
overflow:auto;
position:absolute;  
top:0px;  
left:0px;  
z-index:-1;
}

高度自动不在后台div中工作

4 个答案: