전체 페이지의 CSS 필터

전체 페이지에 CSS 필터를 넣을 수 있는지 알고 싶습니다. 페이지를 볼 수 있도록 약간 회색 필터가 있고 아무 것도 클릭 할 수 없습니다. 필터가 위에 있습니다.전체 페이지의 CSS 필터

2011-01-26 DonJuma

이 다음과 같은 스타일로, 당신의 DOM의 하단에 빈 오버레이 DIV (<div id="overlay"></div>)을 배치함으로써 달성 될 수있다 :

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

어떤 Z-을 선언 한 경우는 조심해야합니다 색인. 또한 문서 높이가 뷰포트보다 큰 경우 오버레이 div에서 JavaScript 처리가 필요할 수 있습니다.

출처

2011-01-26 20:28:43 Chris

나는 z- 색인없이 DOM의 맨 아래에 넣을 까? 또는 전체 페이지를 포함하도록 태그 사이에 직접 넣을 수 있습니까? – DonJuma

다른 절대 위치 요소가있는 경우 Z- 색인이 필요할 수 있습니다. – Spliffster

@Matthew : DOM 하단, ''태그 닫기 전. – Chris

HTML (페이지 하단에이를 넣어) :

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

CSS :

당신이 뒤로 브라우저 (IE8 이하)를 지원하려면

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

, 당신이해야합니다 코드를 재조정하십시오. 예를 들어, RGBA는 IE에서 지원되지 않습니다.

출처

2011-01-26 20:29:25

IE6은 고정 위치를 지원하지 않습니다. 가난한 사람들을 위해 지원해야합니다. – Spliffster

위의 rgba()를 확인하십시오. ;-) – Chris

@lofto 네, 알아요. 그게 내가 전에 한 일이야. 하지만 IE를 더 이상 지원하지 않습니다';)' –

전체 페이지의 CSS 필터

답변

관련 문제