Question

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

我有一个200x200px的PNG图像，位于200x300px div之上。 div是鲑鱼色的。只能点击div右侧的100px。

jsFiddle here： http://jsfiddle.net/xhAVU/1/

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

在IE9中：无法点击图片。

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

Answer 1

Dup 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 pointer-events property。

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;
}

如何在IE9中点击透明的PNG？

3 个答案: