한 페이지를 떠나는 내용을 밖으로 검게하는 것

Question

그래서 나는 apple inspector 도구가하는 것과 같은 것을하고 싶습니다. 그러나 나는 프로젝트에서 CSS를 사용하고 있습니다.

사이트의 특정 페이지에 아이디어가 있습니다 (라이트 박스 또는 두꺼운 상자와 비슷 함). 특정 divs, & 다른 요소는 계속 표시됩니다. 이는 요소를 검사 할 때 Safari가 수행하는 것과 유사합니다. 해당 요소를 제외하고 페이지의 나머지 부분을 검정색으로 표시합니다.

그럼, 어떤 생각일까요?

건배!

Answer 1

CSS 만 사용 하시겠습니까? 그렇다면, 내가 가지고 올 수있는 최선은 이것이다 :

<style> 
a:hover *:not(#except) 
{ 
    background:green; 
} 
</style> 
<a href="#"> 
    Link 
    <p> 
     green 
    </p> 
    <p id="except"> 
     black 
    </p> 
</p> 

불행히도 :하지() 선택은 CSS3의 일부이며 대부분의 브라우저는 아직 지원하지 않습니다 (하지만 사파리 4는 않습니다). 그건 하나의 가능성이지만 너무 좋지는 않습니다.

또 다른 옵션은 Javascript를 사용하는 것입니다. 직사각형 블록 요소로 작업하는 경우 요소의 x 및 y 값을 정상적으로 유지하는 방법에 대해 살펴보고 해당 요소의 4 개 부분 (위, 아래, 왼쪽, 오른쪽)을 잘라냅니다. 배경이 일부 반투명 PNG 인 일부 div를 배치하십시오. 예. 도장 자바 위젯과 협력

------------------ 
|lef|---up---|rig| 
|t--|________|ht-| 
|---| normal |---| 
|---|________|---| 
|---|-down---|---| 
------------------ 

Answer 2

, 그것은 하나 개의 큰 요소가 숨겨져함으로써 모달 다이얼로그 구현 (display:none; background-color:#000; opacity:0.5;) 대부분의 시간은 자바 스크립트에 의해 설정 스크린 (position:absolute; top:0; left:0; 폭과 높이를 커버하도록 위치하지만 전체 창 크기). 그런 다음 z-index 값이 표시되고 표시되도록 설정된 모든 요소에는 위에있는 Z- 색인이 지정됩니다. 상대적으로 또는 절대적으로 강조 할 모든 요소를 ​​배치 할 수 있다면이 방법을 사용할 수 있습니다.