Question

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 filter is on top.

Answer 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.