CSS - Тонированная непрозрачность

Question

Мне интересно, можно ли применить оттенок к непрозрачности в css?

У меня есть PNG различных размеров. Когда пользователь нависает над PNG, я хочу, чтобы PNG изменял непрозрачность до 0,5 с оттенком # 000. Согласно w3schools, у вас есть возможность изменять значение непрозрачности, а не оттенок, который всегда установлен на #FFF.

Я попытался установить черный ящик с его непрозрачностью, установленным поверх моего PNG, и через css он переключился между display:none/block; при наведении PNG. Это не сработало, поскольку мои PNG не являются прямоугольными изображениями и имеют различные размеры, что означает, что черный ящик не покрывает только мой PNG.

Есть ли альтернативные решения проблемы?

Answer 1

Webkit пример: http://jsfiddle.net/5APXu/1/

div:hover { opacity: .5; -webkit-filter: grayscale(100%) sepia(100%); } 

Это использует CSS filter property, который начинает gain support. Возможны многочисленные эффекты, поэтому вы можете, вероятно, достичь своего первоначального желания черного/серого оттенка.

• Article many filter examples
• Masking (alternate option)

Answer 2

Вы можете применить цвет фона к изображению при наведении, чтобы получить необходимый эффект. Вот пример: http://jsfiddle.net/atbnn

img:hover { 
    opacity: 0.5; 
    background: #000; 
}