跨浏览器解决方案：在图像下方可以点击链接

Question

我在HTML页面中有一个包含曲线的标题。

我的问题：曲线是图片＆amp;它位于最高的z指数。它旨在切断它下面的一些文本，使其具有最高的z指数。因此，可以单击图像（曲线）下方的链接，因为图片位于它们之上。

这是简单的JSFiddle：http://jsfiddle.net/hE7D5/2/

如何将图片下方的链接设为可点击？

我知道最简单的方法是使图像具有css：pointer-events：none; 但是这在IE＆amp;我正在寻找最适合跨浏览器的解决方案。

<div id="headerContainer" style="position: relative; width: 100%; text-align: center; background-color: yellow;">
    <div id="header" style="width: 1100px; height: 400px; padding-left: 30px; padding-right: 30px;">
        <ul id="navbar" style="background-color: red; width: 800px; height: 40px; float: left;"></ul>
        <a id="logo" href="www.google.com" style="background-color: red; width: 190px; height: 40px; float: right; margin-top: 15px;">Cant be Clicked</a>

        <br/>
        <div id="cutOffText">
            <p style="padding: 0; margin: 0; font-size: 200px;">ABCDEFG</p>
        </div>
    </div>

    <div id="curveOverlay" style="z-index: 1; position: absolute; left: 0; top: 0; background-image: url('http://i44.tinypic.com/rs8y7m.png'); background-position: center bottom; background-repeat: no-repeat; width: 1100; height: 400px;">
    </div>
</div>

PS：如果在图像下没有办法使链接可以点击，你能否建议我可以使用的HTML布局来实现我的外观但是我的导航栏链接是否可点击？

Answer 1

简单地说：你不能。不是没有很多努力。为了达到这个效果，你需要将图像作为一个图像图，然后确保它对像素模糊不清。

说实话，这看起来很糟糕，但你可能有一些合理的理由这样做

编辑：看起来像this

的副本

Answer 2

您可以将当前位于图形下方的元素置于其顶部，并将其背景设置为大部分透明。这样，文本将在图像上方，而背景颜色似乎在图形的后面或内嵌。

Answer 3

如果您能够精确控制图像背后的布局，您可以使用相同尺寸的“空”链接在图像上方复制该布局（我在下图中用绿色虚线勾勒出来） ）。

Answer 4

在您的示例中，您可以使用cssSandpaper旋转曲线的图像。
如果您稍微修改曲线，按钮将完全可以点击。

Answer 5

这不起作用吗？

#logo {
    position: relative;
    z-index: 10;
}