3

在我的网络应用程序中，我需要对一些图片进行去饱和/灰度处理。我正在使用以下 CSS 来实现：

.grayscale {
  filter: grayscale(100%); /* Current draft standard */
  -webkit-filter: grayscale(100%); /* New WebKit */
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%); /* Not yet supported in Gecko, Opera or IE */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
  filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  -webkit-filter: grayscale(1); /* Old WebKit */
}

这涵盖了广泛的浏览器。问题是一些像 Safari 5 这样的老版本不受它的影响。我知道有一些像 Pixastic 这样的 jQuery 库确实支持那些较旧的浏览器，但我想使用尽可能少的 jQuery 来使我的页面加载尽可能快。因此，我的问题是：可以检查图像是否是灰度的，如果没有，使用像 Pixastic 这样的 jQuery 插件来这样做？

4

1 回答 1

2

你可以使用modernizr来检测css过滤器：https ://github.com/Modernizr/Modernizr/blob/master/feature-detects/css/filters.js

于 2013-08-05T03:00:10.277 回答