6

画像の彩度を下げるプラグインをたくさん見ました鬼ごっこ。

しかし、背景画像（要素（div）の背景として使用される画像）の彩度を下げるものは見つかりませんでした。

2つの背景を使用せずにホバー時に背景画像の彩度を下げる方法はありますか（つまり、画像スプライトの1つは白黒で、もう1つはカラーです）

ImageSpritesを使用してこのようなことを行うことができます。

// 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();
                });

しかし、私はこれを望んでいません。彩度の低い背景画像をオンザフライで表示したい。助けてください。

4

2 に答える 2

3

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

たぶん、あなたはそれをcanvas（より良いブラウザサポート）でより良くするか、あるいは例えばphpでサーバー自体でより良くするべきです。

于 2013-01-01T17:29:56.577 に答える
0 
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;
}

これは、誰かがリダイレクトを必要とすることを期待している関連する質問です。

Div内の他の画像とのみ背景画像の彩度を下げるCSSは彩度を維持します

于 2015-09-27T07:38:20.603 に答える