覆盖图像但没有图形其他Div可选

Question

在我的网站顶部，你会发现在一个大型马戏团帐篷下面的特色内容循环，从这里我有一些我要覆盖的窗帘的png图像。

现在上面不是问题，我希望实现的是，只有窗帘在哪里，它不应该影响特色内容循环，而你仍然可以互动。

是否有可能，如何覆盖我的窗帘，将其固定在一边，只有它才能使特色内容循环仍然完全难以处理，而不是我的窗帘明显在哪里？

“窗帘结束了 但是在这个区域 你仍然可以做标准 onClick事件，突出显示 在正常的div中，你可以做很多事情。“

其他

在图层中，想象只有窗帘在后面的内容上，只有当你在窗帘上时，后面的内容才不能互动，否则将悬停在特色循环内容上。

更新

看着我的窗帘红色部分周围的地图，而不是阴影，我用this导致了以下结果：

{
  {'x': 62, 'y': 375}
  {'x': 59, 'y': 367}
  {'x': 59, 'y': 350}
  {'x': 56, 'y': 326}
  {'x': 53, 'y': 271}
  {'x': 51, 'y': 184}
  {'x': 60, 'y': 170}
  {'x': 65, 'y': 167}
  {'x': 93, 'y': 164}
  {'x': 126, 'y': 158}
  {'x': 169, 'y': 148}
  {'x': 208, 'y': 137}
  {'x': 251, 'y': 121}
  {'x': 282, 'y': 108}
  {'x': 335, 'y': 83}
  {'x': 365, 'y': 66}
  {'x': 400, 'y': 45}
  {'x': 420, 'y': 31}
  {'x': 441, 'y': 16}
  {'x': 455, 'y': 2}
  {'x': 504, 'y': 2}
  {'x': 535, 'y': 29}
  {'x': 597, 'y': 69}
  {'x': 660, 'y': 101}
  {'x': 731, 'y': 129}
  {'x': 788, 'y': 147}
  {'x': 841, 'y': 159}
  {'x': 888, 'y': 167}
  {'x': 901, 'y': 169}
  {'x': 905, 'y': 174}
  {'x': 914, 'y': 183}
  {'x': 912, 'y': 238}
  {'x': 910, 'y': 291}
  {'x': 906, 'y': 331}
  {'x': 905, 'y': 348}
  {'x': 905, 'y': 360}
  {'x': 937, 'y': 361}
  {'x': 952, 'y': 358}
  {'x': 960, 'y': 356}
  {'x': 961, 'y': 336}
  {'x': 943, 'y': 208}
  {'x': 939, 'y': 175}
  {'x': 941, 'y': 165}
  {'x': 940, 'y': 142}
  {'x': 924, 'y': 143}
  {'x': 913, 'y': 146}
  {'x': 877, 'y': 143}
  {'x': 791, 'y': 129}
  {'x': 709, 'y': 105}
  {'x': 647, 'y': 80}
  {'x': 597, 'y': 55}
  {'x': 548, 'y': 27}
  {'x': 519, 'y': 5}
  {'x': 510, 'y': 0}
  {'x': 450, 'y': 0}
  {'x': 444, 'y': 4}
  {'x': 422, 'y': 19}
  {'x': 387, 'y': 42}
  {'x': 347, 'y': 65}
  {'x': 303, 'y': 85}
  {'x': 230, 'y': 112}
  {'x': 192, 'y': 124}
  {'x': 95, 'y': 143}
  {'x': 65, 'y': 146}
  {'x': 44, 'y': 145}
  {'x': 26, 'y': 143}
  {'x': 24, 'y': 169}
  {'x': 23, 'y': 190}
  {'x': 15, 'y': 266}
  {'x': 6, 'y': 333}
  {'x': 0, 'y': 368}
  {'x': 17, 'y': 375}
  {'x': 38, 'y': 376}
  {'x': 50, 'y': 376}
  {'x': 62, 'y': 375}
}

或者这个相当大的输出我放在这里的小提琴http://jsfiddle.net/3dsjxd6e/

现在我要了解我创造了什么以及如何使用它。

Answer 1

未经编辑的问题的解决方案：

您可以使用pointer-events: none;在CSS中执行此操作。

浏览器支持：

不是很好，但也不是很可怕。 http://caniuse.com/#feat=pointer-events

解决方案：

解决方案非常简单，只需使用绝对定位或负边距让幕布与背景重叠即可。 然后将pointer-events: none;添加到覆盖元素（幕布），您将能够选择文本或触发下方的悬停。

小提琴：

在这里：http://jsfiddle.net/7bwaarww/1/

编辑问题的解决方案：

现在我们有了一个表示窗帘形状的多边形，我们可以使用PIP（http://en.wikipedia.org/wiki/Point_in_polygon）算法判断鼠标是否在幕后。

小提琴：

http://jsfiddle.net/7bwaarww/5/