تطبيق مرشحات التدرج الرمادي في 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-effacts-in-ie10.aspx

مثال:

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