为现有网站添加深色背景封面

Posted 2023-02-24

【中文标题】为现有网站添加深色背景封面

【英文标题】：Add Dark Background Cover to Existing Website

【发布时间】：2012-06-29 04:38:36

【问题描述】：

我正在建立一个网站，我想在用户填写表单时添加一个深色的半透明背景图像来掩盖背景。我想知道您将如何做到这一点，因为我当前的实现不起作用。

目前，当我尝试实现它时，半透明背景不会水平拉伸页面的整个宽度，并且似乎在页面底部创建了不需要的垂直空间块。我现有的解决方案包括创建一个 div 并使用 position:relataive; top:-1100px; left:0px; 将此 div 放置在我想要的位置。

在网站上，这个半透明的背景位于名为“查找我们”的第四页也是最后一页。单击标有“反馈”的流苏将显示一个表格。目前，由于背景繁忙，表格难以阅读，因此我想使用半透明背景封面来“模糊”当前页面上除表格之外的所有内容。

在我尝试添加半透明背景之前的演示：http://www.sfu.ca/~jca41/stuph/it/website01/template.html

我尝试添加半透明背景后的演示： http://www.sfu.ca/~jca41/stuph/it/website02/template.html

【问题讨论】：

您的源代码中有一个</selected> 结束标记。应该是</select>。

【参考方案1】：

更改 #cover 的 CSS：

#cover 
  position:absolute;
  top:0px;
  left:0px;

【讨论】：

你可以去掉高度和宽度，也可以做right: 0; bottom: 0;。

【参考方案2】：

封面 div 的 z-index 比流苏 div 多。将流苏 div 的 z-index 设置为 120，并且您已经使用 z-index 115 进行了覆盖。检查是否有效。

【讨论】：

哈哈。我没有注意到这一点。谢谢你帮我捡起来:)