CSS Overlay Effect - Exclude certain container

问题

I am applying an overlay effect to a webpage with the CSS shown here:

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

This CSS overlays the entire webpage with a color (black) which is later set to 30% opacity with JS. I would like to exclude a div with id="noOverlay" so that the CSS is NOT applied to this div. Is this possible? And if so... how??

回答1:

It may be possible to make the z-index of that certain element higher than the overlay. Also for the overlay you might consider using rgba for the opacity.

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

Just watch for browser compatibility with this.

回答2:

The simplest solution is removing class jqifade from div with id noOverlay:

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

Or use CSS3 :not selector (works in all modern browsers):

.jqifade:not(#noOverlay) {}

EDIT: Another solution: apply css styles using jQuery:

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

来源：https://stackoverflow.com/questions/10653471/css-overlay-effect-exclude-certain-container