CSS 그레이 스케일 필터가 갑자기 작동을 멈 춥니 다.

Question

최근 내 웹 사이트 (DezinoGraphist.com)의 그레이 스케일 효과가 갑자기 작동을 멈췄습니다. 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"); 
} 

희망 사항은 매우 미약합니다.

Answer 1

봅니다 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'); 

Answer 2

감사 Devian을. SVG 필터를 넣는 것이 트릭을 만들었습니다. 작동했습니다 :)