CODEWITHSUNDEEP
htmlcss
DonJuma
DonJuma

Reputation: 2094

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

Upvotes: 1

Views: 3552

Answers (2)

Chris
Chris

Reputation: 3795

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.

Upvotes: 6

Šime Vidas
Šime Vidas

Reputation: 185913

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.

Upvotes: 0

Related Questions