Áp dụng bộ lọc xoay CSS sắc đến một hình ảnh thang độ xám

Question

Tôi cố gắng để làm việc ra làm thế nào để thay đổi màu sắc của một hình ảnh thang độ xám sử dụng CSS ...

tôi có hai hình ảnh (một màu và một màu xám) và có áp dụng mã này để cả hai:

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" /> 

này thay đổi thành công hình ảnh màu, nhưng hình ảnh thang độ xám vẫn không thay đổi.

Có cách nào để thay đổi màu sắc của hình ảnh thang độ xám, hoặc sử dụng CSS công nghệ khác không?

Một bản demo là ở đây: http://jsfiddle.net/ATpv8/

Rất cám ơn trước sự giúp đỡ của bạn ...

Answer 1

Như hình ảnh thang độ xám không chứa màu theo định nghĩa, một bộ lọc màu nâu đỏ cần phải được bổ sung đầu tiên 'colourise' bức ảnh màu xám.

Từ đó, chức năng xoay màu có thể được áp dụng để cung cấp màu sắc.

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

Demo đây: http://jsfiddle.net/ATpv8/2/