CSSを使ってdivの背景画像を彩度を落とす方法は？

Question

タグで画像を不飽和化するために非常に多くのプラグインを見ました。

しかし、私は（、要素（DIV）の背景として使用されている画像を背景画像を不飽和化するための任意のものを見つけることができませんでした。

を出してホバー上の背景画像を不飽和化する方法はあります2つの背景 （IEイメージスプライト1はB & Wで、他のカラーである）

を使用して、私はこの使用して画像のスプライトのような何かを行うことができます。

// Initially color Image  
$(<element>).mouseover(function(e){ 

        jQuery(this).children(":first").stop().animate(
        { 
         'background-position': <some coordinates> 
         // Coordinates of b&w Image 
        }, 
        100      
        ); 

        e.stopPropagation(); 
       }) 
       .mouseout(function(e){ 

        jQuery(this).children(":first").stop().animate(
        { 
         'background-position': <some coordinates> 
          // Coordinates of color Image 
        }, 
        100, 
        settings.easingType 
        ); 

        e.stopPropagation(); 
       }); 

をしかし、私はこれをしたいいけない。私はDにしたいです飛行中の背景画像を浮かせます。 助けてください。

Answer 1

element: hover{ 
    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"); 
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -ms-filter:  grayscale(100%); 
    -o-filter:  grayscale(100%); 
    filter: gray; 
} 

ここでは、リダイレクトを必要とすると思われる関連する質問があります。

CSS to Desaturate Background Image Only WIth Other Images in Div Stay Saturated

Answer 2

http://davidwalsh.name/css-filtersをご覧ください。いくつかのフィルターメソッド（Webkitブラウザー）について説明します。

おそらく、キャンバス（ブラウザのサポートが改善されている方）や、サーバー自体に最適です（たとえばphpなど）。