css - CSS 叠加效果 - 排除某些容器

Question

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

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

这个 CSS 用一种颜色（黑色）覆盖整个网页，后来用 JS 将其设置为 30% 的不透明度。我想排除一个 div，id="noOverlay"这样 CSS 就不会应用于这个 div。这可能吗？如果是这样……怎么办？？

score 0 · Accepted Answer

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

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

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

.jqifade:not(#noOverlay) {}

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

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

score 0 · Accepted Answer

可以使某个元素的 z-index 高于叠加层。同样对于覆盖，您可能会考虑使用 rgba 作为不透明度。

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

只需注意浏览器与此的兼容性。

2 回答 2