这可能吗？幻灯片旋转上的透明 png（可点击）

Question

我想要滑动两圈（或至少一圈），但上面有这个皮肤：

叠加图像将位于图像之上，因此无法单击图库（并且无法更改其中的图像）。我知道地图坐标，但这是一个滑块革命，所以我认为在这种情况下它不会起作用。

有什么办法可以实现吗？

我的 HTML & 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: "pointer-events: none;"

！

这可能吗？幻灯片旋转上的透明 png（可点击）

Is this possible? transparent png over slide revolution (clickable)

slider

png

transparent