灯箱：使屏幕的其余部分透明的问题

设计一个网站，我在其中使用了很多背景：rgba在很多地方。当我尝试制作一个灯箱时，我正在使用background: rgba(0, 0, 0, 0.6) !important;使屏幕的其余部分变得透明 - 不能像其他元素的背景一样正常工作（如预期的那样）。灯箱：使屏幕的其余部分透明的问题

尽量选用Z-索引来实现灯箱，但未能

我不好的解释，所以这里的代码

<html> 
<style type="text/css"> 
.element{ 
    height: 200px; 
    width: 300px; 
    background: rgba(255,255,255,0.5); 
    z-index: 1; 
    border:1px solid black; 
    position: relative; 
    margin: 0 auto;} 
.black{ 
    position: relative; 
    background: rgba(0, 0, 0, 0.6) !important; 
    z-index: 200;} 
</style> 
<body class="black"> 
<div class="element">Hello,i have to go to the background 
    but am not going cos my immediate parent isnt 
    letting me,even though my grand dad asked me to!!.. 
</div> 
</body> 
</html>

正如你可以在c，股利不在背景，但在前台。没有背景设置的div - 这可以解决，但我工作的网站有太多的背景摆脱（所以，不能这样做）

请帮忙，新手上路

来源

2011-09-21 Vivek Chandra

你所说的“屏幕透明的休息”呢？ – mikerobi

屏幕的其余部分在背景中。身体上的透明度以div为中心 –

浅谈身体不透明度很混乱。透明的身体可以让你透过浏览器下方的窗口！ – mikerobi

如果我理解你的问题，你需要一个透明的覆盖层来覆盖灯箱下的整个屏幕。

正确的做法是创建一个全屏浮动div来覆盖整个屏幕。 CSS会看起来像这样。

.overlay { 
    position:absolute; 
    top:0; 
    left:0; 

    width:100%; 
    height:100%; 

    background: rgba(0, 0, 0, 0.6); 
    z-index: 0; 
}

然后添加一个<div class="overlay"></div>

来源

2011-09-21 13:54:47 mikerobi

灯箱：使屏幕的其余部分透明的问题

回答

相关问题