CSS叠加效果 - 排除某个容器

Question

我正在使用此处显示的CSS对网页应用叠加效果：

.jqifade{
    position: relative; 
    background-color: #000000; 
    height:2315px !important; /*set to page height*/
}

此CSS使用颜色（黑色）覆盖整个网页，稍后使用JS将其设置为30％不透明度。我想用id="noOverlay"排除div，以便CSS不应用于此div。这可能吗？如果是这样......怎么样？

Answer 1

最简单的解决方案是从ID为 noOverlay 的div中删除 jqifade 类：

$("#noOverlay").removeClass("jqifade").

或者使用CSS3：not selector（适用于所有现代浏览器）：

.jqifade:not(#noOverlay) {}

编辑： 另一种解决方案：使用jQuery应用css样式：

$(".jqifade:not(#noOverlay)").css(...)

Answer 2

可以使该特定元素的z索引高于叠加。另外，对于叠加层，您可以考虑使用rgba作为不透明度。

.jqifade{
    position: relative; 
    background-color: rgba(255, 255, 255, .3); 
    height:2315px !important; /*set to page height*/
}

请注意浏览器与此兼容。