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上工作

回答

相關問題