徘徊时获取棕褐色效果图像和全彩色？

Question

我发现这个CSS代码，它显示图像的灰度颜色，然后在全屏色时悬停图像。我需要相同的，但与棕褐色代替灰度

img { 
    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 3.5+ */ 
    filter: gray; /* IE6-9 */ 
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ 
} 

img:hover { 
    filter: none; 
    -webkit-filter: grayscale(0%); 
} 

更新：此代码尝试，但它并没有工作在Firefox。棕褐色图像根本没有显示：

img.sepia{ -webkit-filter: sepia(1); 
-webkit-filter: sepia(100%); -moz-filter: sepia(100%); 
-ms-filter: sepia(100%); -o-filter: sepia(100%); 
filter: url(sepia.svg#old-timey); 
filter: sepia(100%); 
background-color: #5E2612; 
filter: alpha(opacity = 50); 
zoom:1; 
} 

Answer 1

您可以使用Sepia CSS滤镜。

http://html5-demos.appspot.com/static/css/filters/index.html

Answer 2

使用WebKit和过滤器，这是很容易的。这使您可以仅剪切和粘贴：

img { 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'old-timey\'><feColorMatrix type=\'matrix\' values=\'0.14 0.45 0.05 0 0 0.12 0.39 0.04 0 0 0.08 0.28 0.03 0 0 0 0 0 1 0\'/></filter></svg>#old-timey"); 
    -webkit-filter: sepia(1); 
    -webkit-filter: sepia(100%); 
    -moz-filter: sepia(100%); 
    -ms-filter: sepia(100%); 
    -o-filter: sepia(100%); 
    filter: sepia(100%); 
} 
img:hover { 
    filter: none; 
    -webkit-filter: sepia(0); 
    -moz-filter: sepia(0); 
    -ms-filter: sepia(0); 
    -o-filter: sepia(0); 
    filter: sepia(0); 
} 

Answer 3

这是为了得到它在FF更喜欢镀铬

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'old-timey\'><feColorMatrix type=\'matrix\' values=\'0.64 0.55 0.15 0 0 0.52 0.49 0.14 0 0 0.18 0.38 0.13 0 0 0 0 0 1 0\'/></filter></svg>#old-timey");