javascript - 图像滑块上的剪辑路径（蒙版）CSS 样式（跨浏览器）

Question

我一直在尝试掩盖 jQuery 图像滑块。滑块包含以下结构：

<div class="flexslider">
<ul class="slides">
    <li style="background-image: url('slides/1.jpg');"></li>
    <li style="background-image: url('slides/2.jpg');"></li>
    <li style="background-image: url('slides/3.jpg');"></li>
    <li style="background-image: url('slides/4.JPG');"></li>
    <li style="background-image: url('slides/5.jpg');"></li>
    <li style="background-image: url('slides/6.jpg');"></li>
    <li style="background-image: url('slides/7.jpg');"></li>
</ul>
</div>

在这个结构中，我想将 clip-path 属性应用于 flexslider div。在 Chrome 中，通过向属性添加 -webkit- 前缀可以正常工作，但 Firefox 和 IE 似乎不支持正常的 clip-path 属性。

我一直在网上寻找跨浏览器解决方案，但我找不到。我看到 Firefox 只支持 url 值作为剪辑路径属性，但 IE 根本不支持它。

这是这样的想法：

红色部分是图像滑块。

有人知道这个的跨浏览器解决方案吗？

谢谢！