Question

我制作了clip-path并在后台使用.gif让它看起来很棒。但是，我遇到了一个问题：Firefox和IE不支持clip-path。相反，他们只是在一个非常丑陋的事情中显示背景图像。有什么方法可以为Firefox和IE用户提供不同的背景图像吗？

CSS：

.thisdiv {
  width: 280px;
  height: 280px;
  background-image: url("image.gif");
  -webkit-clip-path: polygon(3% 3%, 43% 3%, 54% 4%, 61% 5%, 67% 7%, 74% 10%, 79% 13%, 84% 17%, 88% 22%, 91% 27%, 94% 34%, 96% 41%, 97% 48%, 97% 56%, 95% 64%, 93% 71%, 90% 76%, 86% 81%, 82% 85%, 77% 89%, 60% 60%, 78% 50%, 28% 22%, 28% 78%, 47% 67%, 63% 94%, 56% 96%, 48% 97%, 3% 97%);
  clip-path: polygon(3% 3%, 43% 3%, 54% 4%, 61% 5%, 67% 7%, 74% 10%, 79% 13%, 84% 17%, 88% 22%, 91% 27%, 94% 34%, 96% 41%, 97% 48%, 97% 56%, 95% 64%, 93% 71%, 90% 76%, 86% 81%, 82% 85%, 77% 89%, 60% 60%, 78% 50%, 28% 22%, 28% 78%, 47% 67%, 63% 94%, 56% 96%, 48% 97%, 3% 97%);
  background-size: cover;
  background-blend-mode: screen;
}

Answer 1

不幸的是，剪辑路径不仅仅支持yet

因此，您最好的选择是在您的网站中加入polyfill

不幸的是，您网站的这个方面将依赖于JS，因此如果客户端已将其关闭，则无法正常工作

Answer 2

好吧，所以这就是我所做的（对于那些感兴趣的人）。我使用了＆＃39; css-hacks＆＃39;：

    @-moz-document url-prefix() {
    #div2{
        display: block;
    }
    #div1 {
        display: none;
    }
}

@supports (-ms-accelerator:true) {
     #div2{
        display: block;
    }
    #div1 {
        display: none;
    }
}

_:-ms-lang(x) {
       #div2 {
        display: block;
    }
    #div1 {
        display: none;
    }
}

使用此功能，我会隐藏<div>以及不支持它的浏览器的剪辑路径，而是显示另一个<div>。它不是最漂亮的方式，但它并不需要JS。

Firefox和IE的不同div背景图像

2 个答案: