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

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

Internet Explorer 10에서는 기존 CSS 방법을 사용하여 회색조 필터를 적용하는 데 어려움을 겪고 있습니다. 이전 버전의 IE와 달리 DX 필터 및 접두사 그레이스케일 필터는 더 이상 지원되지 않습니다.

해결 방법: SVG 오버레이

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

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>

추가 고려 사항:

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

예:

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

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