嵌套DIV是否正确使用不透明度? [英] Proper use of opacity with nested DIVs?
问题描述
因此,我正在尝试创建一个类似Lightlight的感觉.我创建了一个#blackout
div和一个#enlargedBOX
div.
So I'm trying to create a lightbox like feel. I created a #blackout
div and an #enlargedBOX
div.
#blackout
div的不透明度设置为90%,因为我希望后台网站仅显示一点点,但是我不希望我的#enlargedBOX
div使用相同的不透明度.似乎#blackout
将其自身的不透明性强加于其内部的任何内容上.我该如何阻止呢?
The #blackout
div has it's opacity set to 90%, because I want the background website to show through just a bit, however i do NOT want my #enlargedBOX
div to use that same opacity. It seems that #blackout
forces its own opacity onto anything within itself. How can i stop that?
<div id="blackout">
<div id="enlargedBOX">
<img src="" width="500" height="500" border="0" />
</div>
</div>
这是一个 jsFiddle
您会看到红色的背景在白色的#enlargedBOX
格上显示出来.
You'll see that the RED background shows through on the white #enlargedBOX
div.
推荐答案
只需使用rgba()
- 演示
Just use rgba()
- DEMO
#blackout {
position:absolute;
top:0px;
left:0px;
height:100%;
width:100%;
overflow:auto;
z-index:100;
background: rgba(0, 0, 0, .9);
}
这篇关于嵌套DIV是否正确使用不透明度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!