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

Question

在我网站的顶部，您会在一个大型马戏团帐篷下方找到特色内容循环，从这里我有一张我想覆盖的一些窗帘的 png 图像。

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

是否有可能以及我如何实现覆盖我的窗帘，该窗帘固定在一边并且只有它，以便特色内容循环仍然完全难以处理，除了我的窗帘明显所在的位置？

“窗帘拉上 一圈但在这个区域 你仍然可以做标准 onClick事件，高亮显示 文本，几乎可以在普通 div."

中执行的操作

额外

在图层中，想象只有窗帘在后面的内容上方，只有当您在窗帘上时，后面的内容才不是interact-able，否则悬停在特色循环内容上方。

更新：

查看窗帘红色部分周围的贴图，而不是阴影，我使用 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}
}

或者我在 fiddle 此处放置的这个更大的输出 http://jsfiddle.net/3dsjxd6e/

现在我要了解我创建的内容以及如何使用它。

Answer 1

未编辑问题的解决方案：

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

浏览器支持：

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

解决方案：

解决方法很简单，就是让窗帘与背景重叠，使用绝对定位或负边距。 然后将 pointer-events: none; 添加到覆盖元素（窗帘），您将能够 select 文本或触发下方的悬停。

Fiddle:

给你：http://jsfiddle.net/7bwaarww/1/

已编辑问题的解决方案：

现在我们有了代表窗帘形状的多边形，我们可以使用 PIP (http://en.wikipedia.org/wiki/Point_in_polygon) 算法来确定鼠标是否在窗帘上。

Fiddle:

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