텍스트 및 액티브 링크에 대한 그라데이션

Question

필자는 고정 된 위치의 흰색 투 투명한 PNG를 텍스트 위에 창 상단에 붙였습니다. 정상적으로 작동합니다. 페이지 텍스트를 스크롤 할 때 희미하게 사라집니다. 문제는 : 그라디언트 아래에있는 링크를 클릭 할 수 없습니다. 나는 그것이 왜 일어 났는가를 이해하고 텍스트 위의 이미지를 넣는 나의 명백한 해결책은 나를 위해하지 않는다는 것을 이해합니다.

그래디언트 이미지를 텍스트 위에 놓고이 이미지 아래의 링크를 활성 상태로 유지할 수있는 또 다른 방법이 있습니까?

감사합니다.

예 : z-index: -1;을하고 당신은 여전히 ​​당신이 원하는 같은 영향을 미칠 것입니다 실제로 그 아래의 링크 (텍스트와 링크가 그 위에있을 것입니다 다음과 같이 http://jsfiddle.net/fl00r/sBy6G/10/이

Answer 1

당신은 그러나, 이전 버전의 브라우저가이 메소드를 지원하지 않습니다 pointer-events: none;을 사용할 수 있습니다에 대한 링크입니다. 내가 제안 할 수 있습니다 모두가 JS 경로를 추락 클릭 이벤트를 부착되고 그 외에는

https://developer.mozilla.org/en/CSS/pointer-events

.

Answer 2

당신은 그라데이션 div에 대한 z-index을 설정할 수 있습니다 그 이유는 두 번째 divz-index이 자동으로 0으로 설정되기 때문입니다. 여기

내 변경 http://jsfiddle.net/sBy6G/8/