使用此代码块创建叠加层和方框。
问题:该框继承了父级的不透明度,我希望它没有透明度。
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 10000;
text-align: center;
}
#formed{
background-color: white;
width:300px;
height:200px;
position:relative;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
}
<div id="overlay"><div id="formed">Enter Here</div></div>
答案 0 :(得分:1)
不幸的是,这就是它的工作方式。对于父div,您可以尝试使用RGBA作为背景颜色 - background: rgba(0, 0, 0, 0.5);
http://css-tricks.com/rgba-browser-support/
答案 1 :(得分:0)
对于类似的内容(假设您不需要支持IE7或更早版本),请将不透明度应用于伪元素this fiddle does。代码:
<强> CSS 强>
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
text-align: center;
}
#overlay:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 0;
}
#formed{
background-color: white;
width:300px;
height:200px;
position:relative;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
z-index: 1;
}
答案 2 :(得分:0)
谢谢你们。我能够通过做两件事来解决问题:
把孩子div带到它的父母之外。
<div id="overlay"></div><div id="formed">Here</div>
改变div的位置
#overlay{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 10000;
text-align: center;
display: none;
}
#formed{
/* for IE */
filter:alpha(opacity=100);
/* CSS3 standard */
opacity:1;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: white;
width:300px;
height:200px;
position: absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
z-index: 12000;
border: 2px solid #eee;
display: none;
}