CSS3 полутоновый фильтр выглядит по-разному на разных изображениях

У меня есть 3 значка FCB, твиттер и RSS, и я хочу, чтобы они были в оттенках серого, но при наведении они должны измениться на цветную версию. Он отлично работает, но эти 3 изображения выглядят немного по-другому в оттенках серого. Есть ли способ заставить их выглядеть одинаково? Это мой код для оттенков серого:CSS3 полутоновый фильтр выглядит по-разному на разных изображениях

img.grayscale{ 
    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"); /* Firefox 10+, Firefox on Android */ 
    filter: gray; 
    -webkit-filter: grayscale(1); 
}

RSS и твиттер выглядит почти так же, но значок FCB намного темнее. Я думаю, что единственный способ - играть с полутоновым процентом. Есть ли другое решение?

источник

2013-06-10 horin

Вы можете создать демо JSFiddle с фактическими иконки, которые вы используете? – dain

вот вы идите http://jsfiddle.net/UfVA3/ – horin

Теперь я вижу ... Вы уверены, что это официальный Facebook-синий? Мне кажется немного темнее. Но в любом случае, шкала серого работает так, как должна, темные цвета должны быть более темными оттенками серого! – dain

Вы можете добавить класс фб на фб изображения и установить

img.fb { 
    opacity: 0.7; 
}

Это даст иллюзию делает изображение больше света.

Вот jsfiddle

источник

2013-06-10 10:59:13

спасибо, это только обходное решение, но оно работает – horin

Да, я знаю, поэтому я сказал, что это создаст иллюзию его создания. Но это то, что вы можете использовать, пока не найдете лучшего решения. –

CSS3 полутоновый фильтр выглядит по-разному на разных изображениях

ответ

Смежные вопросы