如何使用 javascript 或 css 使 div 突出显示而其余内容为灰色或阴影？ [关闭]

【问题标题】：How can I use javascript or css for making a div highlighted and the rest of the content is gray or shadowed? [closed]如何使用 javascript 或 css 使 div 突出显示而其余内容为灰色或阴影？ [关闭]
【发布时间】：2012-06-01 06:12:32
【问题描述】：

我看到 div 的行为类似于活动框，我认为必须有一种方法，而不是调整页面颜色或创建图层并使用 z 索引将焦点 div 放在前面。

我想隐藏页面上的所有内容，除了我想向用户显示的 div。就像 facebooks 显示前面的图片，但您仍然可以在背景中看到大约 50% 不透明度的页面。

【问题讨论】：

好吧，你试过什么？
你能发一个你想要的例子吗？
你能做到吗？是的。你应该？不，它会很慢。考虑改变你的 UI 设计
我投票结束，因为这个问题太宽泛，没有显示出任何研究工作。您可以简单地检查您看到的任何“突出显示的 div”，以了解它们是如何构建的。之后，您仍然可以提出更具体的问题。

标签： javascript css dom html

【解决方案1】：

创建一个覆盖整个页面的元素：

<div id="modal"></div>

样式：

#modal {
    background: rgba(0,0,0,.8);
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    z-index: 100;
}

仅在需要时显示。接下来为我们想要的元素创建一个类：

.overModal {
    position: relative;
    z-index: 200;
}

演示：http://jsfiddle.net/jonathansampson/pVUHP/

【讨论】：

您完成了作业而不是 OP，但我仍然必须 +1 :)。由 OP 来查找对 rgba() 的浏览器支持。
@bažmegakapa SO 在这里给出答案。有时有人可能会来 SO，因为他们时间紧迫，需要快速帮助。如果他们热爱这个职业，他们将从答案中学习。如果没有，答案就存在于数百名愿意花时间研究它的人身上。
我认为可能有一个单独的 css 属性，比如 css 3，我的目的不是让别人为我编写代码。感谢您的努力。
我会改用background: #888; 和opacity: .8;。