3

そこで、透明なPNGの下にクリック可能な領域を作成したいと思います。

200x300pxのdivの上に200x200pxのPNG画像を配置しています。divはサーモン色です。divの右側の100pxのみがクリック可能です。

ここにjsFiddle：http: //jsfiddle.net/xhAVU/1/

最新のブラウザの場合：コメントを外すpointer-events: none;と、PNGが無視され、サーモンdivがどこでもクリックできることがわかります。

IE9の場合：画像をクリックする方法はありません。

IE9に透明なPNGをクリックさせる方法はありますか？

4

3 に答える 3

3

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ポインターイベントプロパティをサポートしているため。

于 2012-08-21T15:52:47.353 に答える
0

低いz-index値（たとえば10）を使用してpng画像を送り返してみて、高い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;
}
于 2012-08-21T05:25:47.433 に答える
0

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;
}
​
于 2012-08-21T05:26:13.163 に答える