Фильтр CSS на всей странице

Question

Я хочу знать, могу ли я поставить фильтр css на целую страницу, чтобы вы могли видеть страницу, но на ней есть слегка серый фильтр, и ничто не может щелкнуть по странице, потому что фильтр находится сверху.

Answer 1

Это может быть достигнуто путем размещения пустого наложения DIV (<div id="overlay"></div>) в нижней части DOM, со следующим стилем:

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

Вы должны быть осторожны, если вы объявили любой Z- индексов. Кроме того, оверлейному div может потребоваться обработка JavaScript, если высота документа больше, чем область просмотра.

Answer 2

HTML (поместить это в нижней части страницы):

<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); 
} 

Если вы хотите поддерживать отсталые браузеры (IE8 и ниже), вы должны будете скорректируйте код. Например, RGBA не поддерживается в IE.