كيف أحول الصورة إلى نمط Grayscale باستخدام html/css؟

هناك خاصية في css3 تدعى filter مع إضافة اسم المتصفح :

-webkit-filter //chrome
  -moz-filter //mozila
  -ms-filter //IE
  -o-filter // Opera

هذه الخاصية تقبل القيمة

grayscale(100%);

مع إمكانية تغيير النسبة المئوية، حسب الرغبة في شدة الفلتر.

مثال،:

.grayscale { 
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */
}

مصادر:

1

2

3