CSSで画像を色づけるには？

Question

CSSを使用して画像の濃淡を変更するブラウザ間の方法がありますか？たとえば、グレースケールのアイコン（img要素）を持っている場合は、ホバー上のセピアに色を変更したいと思います。

IE以外のブラウザでも動作するため、フィルタを使用できません。それを可能にするCSS 3のトリックがありますか？

Answer 1

イメージをCSSで修正したい場合は、それを行うことはできません。 opacityプロパティで再生することができます。ええ、画像の不透明度を設定するだけですが、素晴らしい効果になります。ここに例があります：

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

スニペットは、フェードインとアウトの画像を透明に変える効果があります。

その他の場合、画像スプライトを使用して、あなたが望むことをすることができます:)

Answer 2

これについては、私が知っているクロスブラウザの標準化された構文はありません。ただし、HTML5 Canvasを使用して、この効果を自分で行うことはできます。 SVGを使用しても動作するかもしれませんが、私はすべてのブラウザ、特にインターネットエクスプローラでどれくらいうまく動作しているのか分かりません。SVG。

色変換マトリクスを使用して

SVG例： http://www.dhmedia.com.au/sites/default/files/examples/SVG-filters/sepia.xhtml

Answer 3

すでに述べたようにCSSでこれを行うには正確方法は、あなたがそうする他の技術を利用することができ、存在しない - つまり、Javascriptを。 非常に基本的な意味で

、あなたはセピアのような色と不透明度rgba(94, 38, 18, 0.2)で画像の上にDIVを重ねることによってセピアのスタイルを模倣しようとする可能性があります - しかし、この方法では、むしろ、粗です。透明な画像を使用してオーバーレイすることもできますが、これはこのオプションよりは優れているかもしれません（でもかなりゴミがかかります）。