如何爲CSS中的圖像着色？

是否有跨瀏覽器的方式來使用CSS來改變圖像的陰影。例如，如果我有一個灰度圖標（img元素），我希望它在懸停時將顏色更改爲棕褐色。如何爲CSS中的圖像着色？

它將不得不對IE比其他瀏覽器，所以我不能使用過濾器。有一些CSS 3技巧可以實現嗎？

沒有，我知道的。好問題，但。 +1 –

最有可能不可能與CSS ..但你可以用一些Javascript和'

做它不認爲它可以做CSS只。你可能想嘗試像paintbrushjs一樣的js庫http://mezzoblue.github.com/PaintbrushJS/demo/index.html或pixastic http://www.pixastic.com/lib/ – ptriek

，如果你想修改CSS的圖像，這是不可能做到這一點。但你可以玩不透明的財產。是的，只是設置圖像不透明度，但它會是一個很好的效果。這裏是一個例子：

img{-webkit-transition:opacity .3s ease-in-out;} 
img:hover{opacity:.6}

這段代碼將給淡入和淡出圖像一個很好的過渡效果到透明。

在另一種情況下，你可以使用圖片精靈你想要做什麼:)

2011-12-11 13:20:29

這是最接近我的想法。謝謝！ –

歡迎:) –

有這個，我知道沒有跨瀏覽器標準化的語法。但是，您可以使用HTML5 Canvas並自己做這個效果。使用SVG也可能有效，但我不確定所有瀏覽器（尤其是互聯網爆炸）是否支持SVG。使用彩色矩陣

2011-12-11 13:01:39

有一個在CSS來做到這一點沒有準確方式，前面已經提到，您可以利用其他技術來做到這一點 - 即的JavaScript。

在非常基本感，你可以嘗試通過覆蓋在圖像的頂部一個div帶有深褐色像顏色和不透明度rgba(94, 38, 18, 0.2)模仿懷舊的風格 - 但這種方法很粗糙。你甚至可以使用一個透明的圖像覆蓋，這可能比這個選項更好（但仍然非常垃圾）。

2011-12-11 13:07:07

回答