如何使用CSS对图像进行去饱和和饱和？

Question

更新

我刚刚意识到去饱和只适用于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;
}

但我无法消除鼠标上的去饱和现象.

对我做错了什么想法？

Answer 1

您只需要反转每个浏览器前缀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/

Answer 2

由于这个问题是关于饱和度的，saturate()过滤器可能更适合。这也允许超饱和的颜色（值高于 100%）：

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

https://jsfiddle.net/t1jeh8aL/

Answer 3

如果您添加这样的过渡效果会更酷：

  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%);
  }