徘徊時獲取棕褐色效果圖像和全綵色？

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");