将CSS色调旋转滤镜应用于灰度图像

Question

我正在尝试使用CSS ...

来解决如何更改灰度图像的色调

我有两个图像（一种颜色和一种灰度），并将此代码应用于：

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

这会成功更改彩色图像，但灰度图像保持不变。

有没有办法改变灰度图像的色调，或者使用CSS另一种技术？

演示在这里：http://jsfiddle.net/ATpv8/

Answer 1

由于灰度图像根据定义不包含颜色，因此需要先将棕褐色滤镜添加到“颜色”中。灰度照片。

从那里可以应用色调旋转功能来提供色彩。

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

在这里演示：http://jsfiddle.net/ATpv8/2/