使用Grayscal懸停效果，無法在FF或IE中正常工作

效果在Chrome中看起來很棒，但在IE和FF中失敗。請在多個瀏覽器查看此鏈接：使用Grayscal懸停效果，無法在FF或IE中正常工作

.portfolio-img{filter: url("data:image/svg+xml;utf8,#grayscale");/* Firefox 10+ /filter: gray;/ IE6-9 /-webkit-filter:grayscale(100%);/ Chrome 19+ & Safari 6+ /-webkit-transition: all .6s ease;/ Fade to color for Chrome and Safari /-webkit-backface-visibility: hidden; / Fix for transition flickering */-moz-box-shadow:0 0 2px rgba(0,0,0,0.2);-webkit-box-shadow:0 0 2px rgba(0,0,0,0.2);box-shadow:0 0 2px rgba(0,0,0,0.2)}

.portfolio-img:hover{filter:none;-webkit-filter:grayscale(0%);-moz-box-shadow:0 0 4px rgba(0,0,0,0.4);-webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);box-shadow:0 0 4px rgba(0,0,0,0.4);-o-transition:.8s;-ms-transition:.8s;-moz-transition:.8s;-webkit-transition:.8s;transition:.8s}

來源

2012-11-09 Matt

哪個效果??指出 –

他指的是「hov呃「效果...當你將鼠標懸停在灰度圖像上時，它會逐漸開始增色。 – Aziz

謝謝你們，感謝NullPointer圖表。非常感激。我真的想用這個灰色來懸停顏色，我找不到一個好的解決方案。我發現有100％的缺陷。你們中的一個人是否知道可以在所有CURRENT瀏覽器中工作的解決方案？ – Matt

其因爲IE和高達火狐 16版本不支持濾鏡

從源頭http://caniuse.com/css-filters

來源

2012-11-09 03:47:19

感謝您的答案。當我在最新的FF中查看此效果時，陰影效果會減弱，但實際的照片效果並不理想。你對此有何看法？難道它不支持輕鬆？ – Matt

@Matt檢查鏈接,,, :-)我已評論的問題 - ）會得到你的解決方案 –

@Matt或直接演示http://dl.dropbox.com/u/11137205/grayscale.html在Firefox中工作正常即檢查...現在，而是我現在 –

使用Grayscal懸停效果，無法在FF或IE中正常工作

回答

相關問題