相关疑难解决方法(0)

是否有一种简单的方法来显示灰度的彩色位图HTML/CSS？

它不需要与IE兼容(我想它不会) - 如果它在FF3和/或Sf3中工作,这对我来说已经足够了.

我知道我可以用SVGCanvas和Canvas 来做这件事,但现在看起来好像很多工作.

有一个真正懒惰的人这样做的方法吗？

这个CSS代码非常适合Internet Explorer,直到9.

img.gray {
    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");
    filter: gray;
    -webkit-filter: grayscale(1);
}

但是我需要为Internet Explorer 10做些什么？

我知道灰度从0到0的范围当然与饱和度从1到0的范围相反,但除此之外,它们的表现完全不同吗？

编辑

我的问题涉及这些过滤器在1-0范围内的行为.他们在内部应用相同的算法还是操作有些不同？我不是要求简单地从MDN引用信息.

编辑2

只是将这些与我的眼睛进行比较,它们看起来略有不同,但我无法确定.

@keyframes fadegrayscale {
  from {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
  }
  
  to {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
  }
}

@keyframes fadesaturate {
  from {
    -webkit-filter: saturate(1);
    filter: saturate(1);
  }
  
  to {
    -webkit-filter: saturate(0);
    filter: saturate(0);
  }
}

img.grayscale {
  animation: fadegrayscale 2s linear alternate infinite;
}

img.saturate {
  animation: fadesaturate 2s linear alternate infinite;
}

<img src="http://www.fillmurray.com/200/300" class="grayscale"/>
<img src="http://www.fillmurray.com/200/300" class="saturate"/>

詹姆斯在这里 我看过50多个教程,但我似乎无法找到一个简单的紧凑jQuery灰度教程.我尝试过的每一个脚本都无法在我尝试启用此功能的网站上运行.如果有人可以帮助我完成一个脚本,使图像没有高度,但页面加载的宽度为500px灰度,但在悬停时更改为颜色,这将是非常棒的.我相信这个脚本会使用HTML5 Canvas.

我想这样做:http://jamestestblog.tumblr.com/