Tragen Sie einen CSS-Farbton drehen Filter auf ein Graustufenbild

Question

Ich versuche, wie die Arbeit aus der Farbton einer Graustufenbild ändern CSS ...

Ich habe zwei Bilder (eine Farbe und eine Graustufe) und habe diesen Code auf beide angewandt:

CSS

img { width: 10pc; float: left; } 
.huerotate { -webkit-filter: hue-rotate(300deg); } 

HTML:

<img alt="Test photo: Mona Lisa" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/500px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg" class="huerotate" /> 

<img alt="Test photo: Hand" src="http://i821.photobucket.com/albums/zz137/ocnsamu/Capture-2.jpg" class="huerotate" /> 

Diese erfolgreich ändert das Farbbild, aber das Graustufenbild bleibt unverändert.

Gibt es eine Möglichkeit, den Farbton von Graustufenbildern zu ändern, entweder mit CSS eine andere Technologie?

Eine Demo ist hier: http://jsfiddle.net/ATpv8/

Vielen Dank im Voraus für Ihre Hilfe ...

Answer 1

Als Graustufenbilder Farbe nicht per definitionem enthalten, ein Sepia-Filter hinzugefügt werden, muss zuerst zu ‚Einfärben‘ das Graustufenfoto.

Von dort aus kann die Farbtonrotationsfunktion angewendet werden, um einen Farbton zu erhalten.

.colorme { 
     -webkit-filter: sepia(100%) hue-rotate(300deg); 
} 

Demo hier: http://jsfiddle.net/ATpv8/2/