Internet Explorer 10에서 이미지에 그레이스케일 필터를 어떻게 적용할 수 있습니까?

Internet Explorer 10에서 회색조 필터 적용: 세부 가이드

Internet Explorer 10은 이미지에 회색조 필터를 적용하는 데 있어 고유한 과제를 제시합니다. 이전 버전의 IE와 달리 IE10에는 DX 필터 및 접두사 그레이스케일 필터에 대한 지원이 부족합니다. 그러나 원하는 효과를 얻기 위해 SVG 오버레이를 활용하는 해결 방법이 있습니다.

해결책: SVG 오버레이

Internet Explorer 10에서 회색조 필터를 적용하려면 다음을 수행할 수 있습니다. 다음 CSS를 사용하세요.

<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>

이 코드에서는 마우스 오버 시 필터를 활성화하기 위해 호버 상태를 사용합니다. 필터 속성은 회색조 변환을 지정하는 feColorMatrix 요소가 포함된 SVG 오버레이를 가리킵니다.

사용 예:

<code class="html"><svg>
    <image href="image.jpg" class="grayscale" />
</svg></code>

브라우저 지원:

SVG 오버레이 접근 방식은 Internet Explorer 10 이상에서 지원됩니다.

추가 리소스:

• [크로스 브라우저 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)

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