灯箱背景颜色应使用 CSS 覆盖整个屏幕答案

【问题标题】：Light box background color should cover the whole screen using CSS灯箱背景颜色应使用 CSS 覆盖整个屏幕
【发布时间】：2012-12-07 10:00:33
【问题描述】：

这是我的网页网址

http://sample.com/mytest.php

在这个页面中，如果我们点击一个登录按钮，它将显示一个黑色背景的弹出屏幕。但是如果我们缩小页面，那么它会减小背景颜色的大小。但是如果我们缩小，我想覆盖整个屏幕的背景。我在我的页面中使用了下面的代码。

.black_overlay{
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 2000%;
  background-color: black;
  z-index:1001;
  -moz-opacity: 0.8;
  opacity:.80;
  filter: alpha(opacity=80);
}

但在测试页面中，下面的代码用于覆盖整个背景。它工作正常。

<style type="text/css">
  /*give the body height:100% so that its child
    elements can have percentage heights*/
  body{ height:100% }
  /*this is what we want the div to look like*/
  div.fullscreen{
    display:block;
    /*set the div in the top-left corner of the screen*/
    position:absolute;
    top:0;
    left:0;
    background-color: black;
    /*set the width and height to 100% of the screen*/
    width:100%;
    height:100%;
    color: white;
  }
</style>

<div class="fullscreen">
  <p>Here is my div content!!</p>
</div>

我怎样才能为我不知道的登录页面背景做同样的事情。任何人都可以帮我解决这个问题。

【问题讨论】：

如何放置登录表单的 div？是在桌子里面吗？
如果我将高度设置为 200%，它只会在标题上方停止背景。
建议：尽量避免这种情况：40 requests ❘ 855.30KB transferred | DOMContentLoaded: 1.9min

标签： javascript css styles

【解决方案1】：

试试

div.fullscreen{
    position:fixed
    ...
}

absolute：元素相对于其第一个定位（非静态）祖先元素定位
fixed：元素相对于浏览器窗口定位

【讨论】：

哦，很好。它工作正常。非常感谢您的回答。我现在很高兴。非常感谢你一次又一次

【解决方案2】：

你必须把下面的代码放在body标签结束之前或body标签开始之后

<div class="black_overlay" id="fade" style="display: block;"></div>

【讨论】：

没有。这应该覆盖整个 div

【解决方案3】：

您需要将弹出窗口和背景移到任何其他块元素之外，可能就在</body> 之前。背景正在拉伸以填充其容器的 100%，即表格单元格而不是正文。这意味着您将不得不改变位置（左右）。

【讨论】：

【解决方案4】：

问题是div.black_overlay在表格里面，所以不能使用widht:100%和height:100%。只需将div.black_overlay 移到表格外并添加z-index: 1;。我已经使用 Firebug 进行了测试，它可以工作！

【讨论】：