페이지 전체에 유리창이 있습니다.

Question

확대/축소 이벤트/플랫폼/브라우저 {mobile/desktop}에 관계없이 HTML 페이지 전체에 "유리창"을 쉽게 만들 수 있습니까?

"쉽게"나는 순수 CSS 지원과 같은 것을 의미하지만 플러그인은 아닙니다.

대체 : 플러그인 조언이 유용 ​​할 수도 있습니다.

감사

Answer 1

그냥 모든 것을 상단에 레이어를 의미하는 경우,이 시도 : 당신이 반투명하려면

#top-layer { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    top: 0; 
    left: 0; 
} 

당신은 opacity: 0.5;을 설정할 수 있습니다.

A jsFiddle example

Answer 2

유리 창? 이 CSS를보십시오 :

div#glassPane { 
    height: 98%; 
    width: 98%; 
    border: 1px solid rgba(0,0,0,0.5); 
    border-radius: 10px; 
    background: rgba(0,0,0,0.25); 
    box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3); 
    position: fixed; 
    top: 1%; 
    left: 1%; 
} 

는 예를 들어 여기를 참조하십시오 : http://jsfiddle.net/vLTWK/

더 여기를 참조하십시오 :
http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text-shadow-box-shadow-and-border-radius/#glassbox

Answer 3

나는이 작업을 수행하는 클래스를 사용합니다.

div.glass-pane { 
    width: 100%; 
    height: 100%; 
    z-index: 10; 
    position: fixed; 
    top: 0; 
    left: 0; 
    margin: 0; 
    padding: 0; 
} 

당신은 높이, 폭, 최고를 변경하고 "유리 창"을 만들기 위해 왼쪽으로 위치 할 수는 특정 영역에 걸쳐 맞습니다. 또한 일부 색상을 추가 할 수 있습니다 (rgba 또는 hsla가 가장 좋으며 유리 효과를 만들 수 있습니다). Z- 색인은 창 상단에 모달 상자를 만들려는 경우 도움이됩니다. 그런 다음 jQuery를 사용하여 클릭 이벤트를 추가하십시오.

최근에이 효과 (here is the source)를 사용하는 Chrome Extension을 게시했습니다.