CSS灰度過濾器突然停止工作

最近我的網站（DezinoGraphist.com）上的灰燼效應突然停止工作。 CSS代碼爲特定部分（關聯）的所有項目添加了灰度效果，直到您將它們放在它們上面爲止，然後這些項目就會變爲常規顏色。CSS灰度過濾器突然停止工作

它工作完美很長一段時間，但現在突然停止工作。我沒有改變任何東西。以下是供參考的CSS代碼：

img.grayscale{ 
filter: grayscale(100%); 
-webkit-filter: grayscale(100%); /* For Webkit browsers */ 
filter: gray; /* For IE 6 - 9 */ 
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */ 
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ 
} 

img.grayscale:hover{ 
filter: grayscale(0%); 
-webkit-filter: grayscale(0%); 
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); 
}

希望這是非常小的事情。

來源

2016-09-04 Dezino Graphist

請添加一個最小，完整和可驗證的例子，另見http://stackoverflow.com/help/mcve – Roy

儘量把某處HTML過濾SVG：

<svg xmlns='http://www.w3.org/2000/svg'> 
    <filter id='grayscale'> 
    <feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/> 
    </filter> 
</svg>

然後在你的CSS只是使用過濾器ID：

filter: url('#grayscale');

來源

2016-09-27 06:27:57 devian

感謝Devian。把SVG過濾器做的伎倆。它的工作:)

來源

2016-09-28 13:20:57

CSS灰度過濾器突然停止工作

回答

相關問題