javascript - 如何在 IE9 中点击透明 PNG？

Question

所以我想在透明PNG下面有一个可点击的区域。

我有一个 200x200px 的 PNG 图像放在 200x300px 的 div 上。div 是鲑鱼色。只有 div 右侧的 100px 是可点击的。

jsFiddle在这里：http: //jsfiddle.net/xhAVU/1/

在现代浏览器中：通过取消注释pointer-events: none;，您可以看到 PNG 是如何被忽略的，并且可以在任何地方单击鲑鱼 div。

在 IE9 中：无法单击图像。

有没有办法强制 IE9 点击透明 PNG？

Answer 1

https://stackoverflow.com/a/10968016的副本：

代替

<img width="200" height="200" style="pointer-events: none" src="...">

和

<svg width="200" height="200" pointer-events="none"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <image x="0" y="0" width="200" height="200"
      xlink:href="..." />
</svg>

因为 IE 支持SVG 指针事件属性。

Answer 2

您是否尝试过使用较低的 z-index 值将 png 图像发回，比如说 10，并使用高 z-index 值来提升可点击区域，比如说 20。

这可能会奏效。看下面的代码。

 .container {
    width: 500px;
    height: 500px;
    background-color: #eeeeee;
}
.container img {
    width: 200px;
    height: 200px;
    position: absolute;
    z-index:10;
   /* pointer-events:none; */
}

.clickable {
    width: 300px;
    height: 200px;
    background-color: salmon;
    cursor: pointer;
    z-index:20;
}

Answer 3

如果 PNG 文件可以移动到 CSS 中，那么我发现您可以在所有浏览器中以这种方式实现它：http: //jsfiddle.net/CkmH6/

使用 CSS：

.container {
    width: 500px;
    height: 500px;
    background: #eeeeee;
}
.overlay {
    background: url(http://ima.gs/transparent/none/36f/transparent-png-200x200.png) no-repeat;
    width: 200px;
    height: 200px;
    position: absolute;
}
.clickable {
    width: 300px;
    height: 200px;
    background-color: salmon;
    cursor: pointer;
}
​