Css Filter On Whole Page

i want to know if i can put a css filter on a whole page so that you can see the page, but it has a slightly grey filter on top and nothing can by clicked on the page because the f

Solution 1:

This can be achieved by placing an empty overlay div (<div id="overlay"></div>) at the bottom of your DOM, with the following style:

#overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000;
    opacity: .6;
    filter: alpha(opacity=60);
}

You'll need to be careful if you have declared any z-indexes. Also, the overlay div may need some JavaScript treatment in case the document height is greater than the viewport's.

Solution 2:

HTML (put this at the bottom of the page):

<div id="overlay"></div>

CSS:

#overlay {
    position:fixed;
    z-index: 100;
    top:0; 
    left:0;
    bottom:0; 
    right:0;
    background-color:rgba(0,0,0,0.2);   
}

If you want to support backward browsers (IE8 and below), you'll have to readjust the code. RGBA is not supported in IE, for instance.