BackgroundImage转换不能在Firefox上工作

我在JavaScript中使用转换，但不能在Firefox上工作，有人知道为什么？在Chrome浏览器上很好。这是我的代码：BackgroundImage转换不能在Firefox上工作

el.style.backgroundImage = "url('menu.jpg')"; 
el.style.transition = "background 0.4s";

来源

2016-01-17 Kakoum

好奇，为什么你把在Javascript摆在首位的过渡？此外，请参阅http://stackoverflow.com/questions/19808764/transition-for-background-image-in-firefox – jeremy

，因为我想要这个效果www.kakoum.fr（在菜单悬停） – Kakoum

你可以把过渡在CSS，并且在JS中修改它时仍然显示它。也看看帖子我链接你 – jeremy

继发表@Jeremy链接的建议;取代设置transition影响background-size为opacity

div a { 
 
    color: #fff; 
 
    z-Index: 3; 
 
    position: absolute; 
 
} 
 
div:before, 
 
div:after { 
 
    content: " "; 
 
    position: absolute; 
 
    background-repeat: no-repeat; 
 
    display: block; 
 
    width: 50px; 
 
    height: 50px; 
 
    transition: background-size 0.4s; 
 
} 
 
div:before { 
 
    background: #1F1F1F; 
 
    background-size: 100% 100%; 
 
} 
 
div:after { 
 
    background: url(http://lorempixel.com/50/50/nature); 
 
    background-size: 0% 0%; 
 
} 
 
div:hover:before { 
 
    background-size: 0% 0%; 
 
} 
 
div:hover:after { 
 
    background-size: 100% 100%; 
 
}

<div><a href="#">abc</a> 
 
</div>

plnkr http://plnkr.co/edit/XJMvtEnuvS1TF1xqIVVQ?p=preview

来源

2016-01-17 17:54:35 guest271314

不工作:( – Kakoum

@ kakoum可以创建jsfiddle来演示吗？ – guest271314

@Kakoum预期结果是什么？ – guest271314

BackgroundImage转换不能在Firefox上工作

回答

相关问题