Серая шкала CSS Фон в Internet Explorer 10 и 11?

Оттенки серого отлично работают со всеми браузерами, кроме ie10 и ie11. Я даже пробовал это. Он хорошо работал с изображениями, которые встроены в HTML-код, но не работают как фоновое изображение, объявленное в 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 {
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}

Это тоже не работает.

Код CSS, который я использую в оттенках серого в фоновом изображении:

#callouts{
min-height: 219px;
margin: 33px 0px 0px 0px;
padding-left: 40px;

background: url("/static/images/images/gs-pricing-4panel.png") no-repeat;

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 

filter: gray;

-webkit-filter: grayscale(1);
}