文本和活动链接上的渐变

I put fixed position white-to-transparent PNG over my text on the top of window and it works fine: when I am scroling my page text smothly dissapear. The problem is: I cant click on links that are situated under my gradient. I understand WHY it happend, and I understand that my obvious solution with putting image above text isn't do for me.

我将固定位置的白色到透明的PNG放在窗口顶部的文本上，它工作正常：当我滚动页面时，文字会消失。问题是：我无法点击位于我的渐变下的链接。我理解为什么会发生这种情况，而且我明白将图像置于文本上方的明显解决方案并不适用于我。

Is there are another solutions to put gradient image over text and make links under this image to stay active.

是否有其他解决方案将渐变图像放在文本上，并使此图像下的链接保持活动状态。

Thanks.

谢谢。

example: http://jsfiddle.net/fl00r/sBy6G/10/

例如：http：//jsfiddle.net/fl00r/sBy6G/10/

2 个解决方案

#1

You can use pointer-events: none; however, older browsers will not support this method.

你可以使用pointer-events：none;但是，旧版浏览器不支持此方法。

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

Other than that all I can suggest is going down the JS route and attaching click events.

除此之外我可以建议的是沿着JS路线并附加点击事件。

#2

You can set the z-index for the gradient div as follows: z-index: -1; and you will still have the same effect you want and the links under it (actually the text and the links will be above it because the second div z-index is automatically set to 0) will work.

您可以按如下方式设置渐变div的z-index：z-index：-1;并且你仍然可以获得你想要的相同效果，并且它下面的链接（实际上文本和链接将在它上面，因为第二个div z-index自动设置为0）将起作用。

here is a link to my changes http://jsfiddle.net/sBy6G/8/

这里是我的更改的链接http://jsfiddle.net/sBy6G/8/

#1