这可能吗？滑动革命的透明png（可点击）

Question

我想要两次幻灯片旋转（或者至少一次），但是它上面有这样的皮肤：

叠加图像将位于图像的顶部，因此单击图库是不可能的（并且子弹可以更改图像内部的图像）。我知道地图坐标，但它是一个滑块革命，所以在我认为这种情况下它不起作用。

有没有办法实现这个目标？

我的HTML＆amp;到目前为止的CSS：(JSFiddle)

<div class="thePNG"></div>
<div class="theSLIDERS">
    <div class="fakeSLIDER1">HEY' IM CLICKABLE</div>
    <div class="fakeSLIDER2"></div>
</div>

.thePNG {
    background-image: url(my-overlay-image.png);
    width: 787px;
    height: 610px;
    background-size: cover;
    z-index: 2;
    position: relative;
}
.theSLIDERS{
    margin-top: -600px;
    z-index: 1;
}
.fakeSLIDER1{
    background-color: red;
    width: 700px;
    height: 300px;
    text-align: center;
    margin: 0 auto 0 auto;
}
.fakeSLIDER2{
    background-color: green;
    width: 700px;
    height: 300px;
}

Answer 1

我找到了自己的答案！

很容易：

CSS： ＆＃34;指针事件：无;＆＃34;

！