Internet Explorer 10에서 회색조 필터 적용

Internet Explorer 10에서는 전통적인 CSS 방법을 사용하여 회색조 필터를 적용하기 위한 과제를 제시합니다. 이전 버전의 IE와 달리 DX 필터 및 접두사가 붙은 그레이스케일 필터는 더 이상 지원되지 않습니다.

해결책: SVG 오버레이

IE10에서 그레이스케일 이미지에 SVG를 사용할 수 있습니다. 씌우다. 여기에는 이미지를 회색조로 변환하는 매트릭스와 함께 SVG 필터를 사용하는 작업이 포함됩니다.

CSS 코드:

img.grayscale:hover {
    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");
}

추가 고려 사항:

• SVG 오버레이 기술은 이미지에 단색 배경이 있을 때 가장 잘 작동합니다.
• SVG에 대한 자세한 내용은 IE10의 필터 효과는 다음을 참조하세요. http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter- effects-in-ie10.aspx

예:

svg {
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}