在CSS3中不能在Firefox或Internet Explorer中工作

我正在創建一個小型企業頁面。我有一個爲我的導航按鈕創建的背景圖片。我希望它們在懸停在圖像上時具有過渡效果。它適用於Chrome，但我無法弄清楚爲什麼我的代碼無法在Firefox或Internet Explorer中運行。在CSS3中不能在Firefox或Internet Explorer中工作

.nav li a.active { 
    background-image: url('../images/02amainhover.png'); 
    background-color: transparent; 
    background-repeat: no-repeat; 
    background-attachment: center center; 
    width: 245px; 
    height: 74px; 
    left: 72px; 
    top: 432px; 
    position: fixed; 
    transition: all .8s ease-out; 
    -moz-transition: all .8s ease-out; 
} 
.nav li a.active:hover { 
    background-image: url('../images/03amainhover.png'); 
    background-color: transparent; 
    background-repeat: no-repeat; 
    background-attachment: center center; 
    width: 245px; 
    height: 74px; 
    left: 72px; 
    top: 432px; 
    position: fixed; 
    transition: all .8s ease-in; 
    -moz-transition: all .8s ease-in; 
}

來源

2016-08-12 Mars

幾件事。首先是你的wayyyyy重複的代碼太多了。網站假設使用相同的代碼，直到你告訴它改變它，所以複製所有這些樣式是毫無意義的。你只需要用你想轉換的東西來更新它。這就是說，你不能轉換背景圖像。請參考轉換樣式的列表：

來源

2016-08-12 17:13:29

這讓人有點更多，因爲，我想這將解釋爲什麼它不能正常工作！謝謝，我可以看到參考表對我非常有用。至於重複的代碼部分，我認爲這是很好的補充？之前有人曾經提到，有時瀏覽器需要重複代碼才能獲得更多規範，並且缺少重複代碼有時可能會導致代碼無法正常工作的問題？ – Mars

舊版瀏覽器（IE6）需要爲'：hover'重複執行任何更改後的值。基本上它需要知道如何改變'：hover'以及如何改變。 – KnightHawk

如果人們還在爲IE6編碼，他們會做錯事。 –

您可以製作兩個圖像，其位置爲：絕對和不同z-索引。頂部的圖像可以從1到0進行不透明度轉換。它可以在所有瀏覽器中使用。

來源

2016-08-12 17:22:30

並且拒絕不透明可以給我以後的過渡看起來？因爲我不想要任何幻想轉換，只是一個簡單的「全部」轉換效果，所以我的圖像在盤旋時從一個轉換到另一個。 – Mars

是的，它會像你想要的那樣工作。 –

正如@Chris Stanley指出的，你不能轉換背景圖像。

您有很多選項，具體取決於您的轉換意圖是什麼樣子。我沒有看到這些圖像。

可以使用filters
可以在單個圖像文件（網格，頂部/底部，等等）結合起來的多個圖像，然後使用背景定位「移動」（即刻）從一個到另一個。您可以將其與其他轉換或過濾器結合使用以提供額外的效果。這是一個非常古老的技巧，您可以通過添加轉場和過濾器來實現新的轉變。

EDIT（後看到的圖像）：新的代碼可能是這樣的：

.nav li a.active { 
    background-image: url('../images/02amainhover.png'); 
    background-color: transparent; 
    background-repeat: no-repeat; 
    background-attachment: center center; 
    width: 245px; 
    height: 74px; 
    left: 72px; 
    top: 432px; 
    position: fixed; 
    transition: all 0.8s ease-out; 

    box-shadow:0px 0px 2px 2px rgba(0,0,0,0.5); 

} 

.nav li a.active:hover { 

    filter: invert(100%); 
    transition: all 0.8s ease-in; 
}

（我不認爲你需要的-moz-transition了無論是。）

來源

2016-08-12 17:37:44 KnightHawk

那麼你的意思是，我可以添加轉換代碼或類似於過濾器的代碼，效果會是一樣的嗎？ – Mars

可能不是「相同」，但你仍然可以做很多事情。我還沒有看到過你的兩張照片......有可能你可以創造出幾乎完全相同的效果，但是如果你沒有看到你想要做的事，我就說不出來。 – KnightHawk

我可以告訴你我的兩個圖像，我有他們的鏈接：這是我的主要圖像：http://www.freewebs.com/aph-imvu/02amainhover.png這是我的第二個圖像：http：// www.freewebs.com/aph-imvu/03amainhover.png – Mars

在CSS3中不能在Firefox或Internet Explorer中工作

回答

相關問題