IE10 고려 사항을 통해 브라우저 간 이미지 그레이스케일을 어떻게 달성할 수 있습니까?

IE10 고려 사항을 포함한 크로스 브라우저 이미지 그레이스케일

Internet Explorer 9 이하 브라우저는 DX 필터를 통해 그레이스케일 필터를 지원합니다. 그러나 IE10은 DX 필터 지원이 부족하기 때문에 독특한 과제를 제시합니다.

IE10 그레이스케일 솔루션

IE10에서 원하는 그레이스케일 효과를 얻으려면 다음을 활용할 수 있습니다. SVG 오버레이. 예는 다음과 같습니다.

<code class="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");
}</code>

추가 리소스

• [CSS를 사용한 크로스 브라우저 이미지 그레이스케일](http://www.karlhorky.com/ 2012/06/cross-browser-image-grayscale-with-css.html)
• [IE10의 SVG 필터 효과](http://blogs.msdn.com/b/ie/archive/2011/ 10/14/svg-filter-효과-in-ie10.aspx)

위 내용은 IE10 고려 사항을 통해 브라우저 간 이미지 그레이스케일을 어떻게 달성할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!