Кросс-браузерное решение: ссылки должны быть кликабельными, когда они находятся под изображением

Question

У меня есть заголовок на странице HTML, который содержит кривую.

Моя проблема: Кривая - это картинка, и она имеет самый высокий z-индекс. Он предназначен для обрезки некоторого текста под ним, чтобы он имел самый высокий z-индекс. В результате, ни одна из ссылок под изображением (кривой) не может быть нажата, потому что картинка находится над ними.

Вот простой JSFiddle: http://jsfiddle.net/hE7D5/2/

Как сделать так, чтобы мои ссылки под изображением можно было нажимать?

Самый простой способ, который я знаю, это сделать изображение css: pointer-events: none; НО это не работает в IE, и я ищу наиболее дружественное к кросс-браузерному решение.

<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

Разве это не работает?

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

Answer 2

В вашем примере вы можете использовать cssSandpaper для поворота изображения кривой .
Если вы слегка измените свою кривую, кнопка станет полностью интерактивной.

Answer 3

У вас могут быть элементы, которые в настоящее время находятся под графикой, а их фоны должны быть в основном прозрачными. Таким образом, текст будет выше изображения, тогда как цвет фона будет выглядеть позади или в соответствии с графикой.

Answer 4

Если вы в состоянии точно контролировать макет того, что находится за изображением, вы можете продублировать этот макет над изображением, используя «пустые» ссылки с такими же размерами (которые я выделил пунктирной зеленой линией на изображении ниже). ).

Answer 5

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

Если честно, это выглядит довольно плохой идеей, но у вас может быть веская причина для этого

РЕДАКТИРОВАТЬ: выглядит как дубликат это