0

设计一个我在很多地方使用了很多背景的网站：rgba 在很多地方。因此，当我尝试制作一个灯箱时，我用它background: rgba(0, 0, 0, 0.6) !important;来使屏幕的其余部分透明——不能作为背景工作来自其他元素的应用（如预期的那样）。

尝试使用 z-index 实现灯箱，但失败

我不擅长解释，所以这是代码

<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不在后台，而是在前台。没有在div中设置背景——这可以解决，但我正在处理的网站有太多背景无法摆脱（所以，不能那样做）

请帮助，新手

4

1 回答 1

0

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

正确的做法是创建一个全屏浮动 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-21T13:54:47.090 回答