Градиент над текстом и активными ссылками

Question

Я помещаю фиксированную позицию от белого к прозрачному PNG поверх текста в верхней части окна, и она работает нормально: когда я прокручиваю свою страницу, текст почти исчезает. Проблема в том, что я не могу нажать на ссылки, которые находятся под моим градиентом. Я понимаю ПОЧЕМУ это произошло, и я понимаю, что мое очевидное решение с размещением изображения над текстом не подходит для меня.

Существуют ли другие решения для размещения градиентного изображения над текстом и создания ссылок под этим изображением, чтобы оставаться активными.

Спасибо.

пример: http://jsfiddle.net/fl00r/sBy6G/10/

Answer 1

Вы можете использовать pointer-events: none;, однако, старые браузеры не будут поддерживать этот метод.

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

Кроме этого, все, что я могу предложить, - это идти по маршруту JS и присоединять события щелчка.

Answer 2

Вы можете установить z-index для градиента div следующим образом: z-index: -1;, и вы по-прежнему будете иметь тот же эффект, что и вы, и ссылки под ним (фактически текст и ссылки будут над ним, потому чтосекунда div z-index автоматически устанавливается на 0) будет работать.

вот ссылка на мои изменения http://jsfiddle.net/sBy6G/8/