web-dev-qa-db-ja.com

CSSを使用して画像の彩度を下げて飽和させるにはどうすればよいですか？

更新

彩度低下はChromeでのみ機能していることに気付きました。 FF、IEおよび他のブラウザーで動作させるにはどうすればよいですか？（見出しが変更されました）

ここの提案に従って、カラー画像をグレースケールに変換しています： HTML/CSSで画像をグレースケールに変換

そして、それはうまく動作します（Chromeで）： http://jsfiddle.net/7mNEC/

<img src="https://imagizer.imageshack.us/v2/350x496q90/822/z7ds.jpg" />

// CSSS
img {
    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; 
}

img:hover {
    filter: none;
    cursor: pointer;
}

しかし、私は例えばの彩度を削除することはできませんマウスオーバー。

私が間違っていることのアイデアはありますか？

html5imagecss3grayscale
20
Steven

ブラウザのプレフィックスCSSプロパティごとにグレースケールを逆にするだけです。

img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
    -moz-filter:    grayscale(0%);
    -ms-filter:     grayscale(0%);
    -o-filter:      grayscale(0%);
    cursor: pointer;
}

http://jsfiddle.net/7mNEC/1/

26
Alex W

次のようなトランジションを追加すると、さらにクールになります。

  img {
    filter: none;
    -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);
    cursor: pointer;
    transition: all 300ms ease;
  }
  img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
    -moz-filter:    grayscale(0%);
    -ms-filter:     grayscale(0%);
    -o-filter:      grayscale(0%);
  }
5
Samuel Ramzan

この質問はsaturationに関するものなので、 saturate() filter の方が適している可能性があります。これにより、過飽和色（100％を超える値）も可能になります。

img {
    filter: saturate(0%);
}
img:hover {
    filter: saturate(300%);
}

http://jsfiddle.net/7mNEC/390/

3
Sphinxxx