如何讓懸停的背景圖片有沒有默認背景圖片的過渡效果？

Question

所以我在<a>上做了一個沒有默認背景圖片的過渡效果，所以當我試圖將鼠標懸停在它上面時，過渡效果不起作用。我懷疑，沒有默認的背景圖像，它不會工作。那麼，如何在不使用JavaScript的情況下實現我的目標或其他選擇？這裏是我的代碼：

<nav> 
     <li><a href="products.html">Products</a></li> 
    </na> 

這裏是我的CSS：

.nav>li>a { font-size:17px; color:#929799; padding:45px 25px 35px 25px; 
     -webkit-transition: background-image 1s ease-in-out; 
     -moz-transition: background-image 1s ease-in-out; 
     -o-transition: background-image 1s ease-in-out; 
     transition: background-image 1s ease-in-out; 
    } 

    .nav>li>a:hover, .nav>li>a:focus{ 
     background:url(http://cdn.myld.com.au/2/1198/web_total-gardens_9a0e4cf244.png) no-repeat top center; color:#38c867; } 

Answer 1

background-image是一個非動畫屬性。您無法應用轉場。

我假設你想淡入圖像上懸停（？）。一種方法僞造它是你的背景圖像應用到僞元素和過渡的不透明度：

body { 
 
    padding-top: 50px; 
 
} 
 

 
nav>ul>li>a { 
 
    font-size: 17px; 
 
    color: #929799; 
 
    padding: 45px 25px 35px 25px; 
 
    position: relative; 
 
} 
 

 
nav>ul>li>a>span { 
 
    position: relative; 
 
} 
 

 
nav>ul>li>a:before { 
 
    content: ""; 
 
    background: url(http://placehold.it/200x100) no-repeat top center; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    opacity: 0; 
 
    transition: opacity 1s ease-in-out; 
 
} 
 

 
nav>ul>li>a:hover:before, 
 
nav>ul>li>a:focus:before { 
 
    opacity: 1; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="products.html"><span>Products</span></a></li> 
 
    </ul> 
 
</nav>

正如在評論中提到@ GabyakaG.Petrioli，你的選擇是錯誤的，你有無效的HTML。兩者都固定在上述的例子

Answer 2

CSS過渡不透明度允許圖像成在指定的持續時間改變的值，動畫的屬性改變

http://css3.bradshawenterprises.com/cfimg/ 或嘗試

過渡：全1 ease-進出;