CSS3を使用して背景画像の色合いを変更する方法は？

Question

ここはhttp://jsfiddle.net/jitendravyas/HdDRA/

上記の例では、画像上の白矢印がある例を参照してください/純粋なCSSを

を用いてフォーカスホバー上の背景画像の色又は色合いを変更することが可能です。私は白い矢印（他の背景画像ではない）の色を、ホバリングとフォーカスに変えたいと思っています。

私の場合はインラインイメージを使用できません。

編集：

私はこのようなhttp://jsbin.com/icemiyが、背景画像のほぼ同じ探しています。

そして私はまた、フェードアウトして色を変更したいので、私は、複数の画像を

Answer 1

を行うことはできませんあなたがやりたいことができないいいえ、あなたは別の異なるを使用して背景を変更することができます画像。

フォントを使用して矢印をレンダリングし、その色を変更することもできます（これもアニメーション化可能です）。

また、Javascriptを使用してイメージの色を操作することもできます。 this answer

Answer 2

ここで私の頭の上から考えてみましょう。

透明色のdivを不透明度0の画像の上に置いて、不透明度を上げてホバリングで10％にすることができます。例えば、不規則な輪郭を持つ画像にした場合には奇妙に見えますが、色合いを制限することはできません。 Photoshopの半不透明レイヤーに相当するので、実現するには乗算やスクリーンなどの他のトリックが必要な作業はできません。

Answer 3

あなたがオンにしたい色の矢印イメージを複製するのが速くて汚い修正です。次に、コード内の背景イメージを置き換えます。

body 
{ 
    background: 
     url(http://www.kapellohair.com/images/white-arrow.png) no-repeat, 
     url(http://www.tnpsc.com/downloads/NaturesScenery.jpg) no-repeat; 
    background-position: 
     center 50px, 
     center top; 
} 

body:hover 
{ 
    background: 
     url(http://www.example.com/images/arrow-with-desired-color.png) no-repeat, 
     url(http://www.tnpsc.com/downloads/NaturesScenery.jpg) no-repeat; 
    background-position: 
     center 50px, 
     center top; 
} 

p.s：リンクが存在しません。説明のためだけです