![](/img/trans.png)
[英]div background image appear nicely in Firefox, disappear in IE6 & 7
[英]Different div background image for Firefox and IE
我创建了一个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;
}
好了,这就是我所做的(对于那些感兴趣的人)。 我使用了'css-hacks':
@-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。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.