Internet Explorer 10에서 이미지에 그레이스케일 필터를 적용하는 방법은 무엇입니까?

Internet Explorer 10의 회색조 필터

회색조를 포함한 CSS 필터는 웹 개발에서 이미지를 향상시키는 데 널리 사용되었습니다. 그러나 기술이 발전함에 따라 브라우저마다 필터를 다르게 구현하여 호환성 문제가 발생합니다.

Internet Explorer 버전 9 이하에서는 DX 필터를 사용하여 CSS를 통해 그레이스케일 필터를 적용하는 것이 간단했습니다. 그러나 이 접근 방식은 Internet Explorer 10에서 더 이상 작동하지 않습니다.

Internet Explorer 10용 솔루션

Internet Explorer 10에서는 회색조 변환을 위한 대체 방법을 제공하는 SVG 필터 효과를 도입했습니다. 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 코드는 사용자가 이미지 위로 마우스를 가져가면 이미지를 회색조로 변환합니다. 필터 속성은 SVG 이미지를 오버레이로 사용하며, 여기에는 이미지 색상을 회색조로 변환하는 필터 효과가 포함되어 있습니다.

추가 정보

Internet Explorer 10의 SVG 필터 효과에 대한 자세한 내용은 다음 자료를 참고하세요:

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

위 내용은 Internet Explorer 10에서 이미지에 그레이스케일 필터를 적용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!