CSS背景過渡 - 漸變

我不能爲我的生活弄清楚爲什麼過渡屬性不工作在我的CSS。下面的代碼：CSS背景過渡 - 漸變

#header #menu-top-nav ul li a { 
    -webkit-transition: background-color 10s; 
    -moz-transition: background-color 10s; 
    -ms-transition: background-color 10s; 
    -o-transition: background-color 10s; 
    transition: background-color 10s; 
} 
#header #menu-top-nav ul li a:hover { 
    background: #dddddd; /* Old browsers */ 
    background: -moz-linear-gradient(top, #dddddd 0%, #d3d3d3 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#d3d3d3)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #dddddd 0%,#d3d3d3 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #dddddd 0%,#d3d3d3 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #dddddd 0%,#d3d3d3 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #dddddd 0%,#d3d3d3 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#d3d3d3',GradientType=0); /* IE6-9 */ 
}

的a標籤背景在技術上是透明的前徘徊（雖然ul它包含在具有背景漸變）。但即使我將a標籤分配爲bg顏色或漸變，轉換仍然不起作用。我已經嘗試將轉換代碼放在a:hover樣式中;我試過將變量更改爲background和background-image，但沒有成功。

我的CSS中有很多風格，但我一直在Chrome中進行調試，無法找到任何衝突的罪魁禍首。我應該提到過渡屬性不適用於任何瀏覽器。

任何人都可以幫助我看起來是一個簡單的果醬嗎？

來源

2013-01-15 Timothy D

你應該看到這個答案http://stackoverflow.com/a/6542623/886539 –

可能的重複[使用漸變背景CSS3轉換]（http://stackoverflow.com/questions/6542212/use-css3-轉換與漸變背景） –

漸變是背景圖像而不是背景色。因此，背景色的過渡對梯度沒有影響。

到目前爲止，不支持背景圖像的轉換。

來源

2013-01-15 18:15:49

正確。謝謝，史文。我以爲我已經閱讀過'background-image'支持的漸變效果。也許那個作者正在爲未來的規格而努力。萬歲的變通辦法。 –

CSS背景過渡 - 漸變

回答

相關問題