通过css镀铬的灰度
[英]grayscale in chrome via css
4 个解决方案
解决方案1
7 已采纳
从当前版本19.0.1084.46添加了对webkit中的本机CSS过滤器的支持
所以-webkit-filter：grayscale（1）可以工作，哪种方法比SVG更好更简单？
解决方案2
5 2012-01-17 14:11:15
另一种解决方案是具有间接级别的svg。
基本上， <img src="wrapper.svg"/>其中wrapper.svg将svg过滤器应用于svg，svg有一个指向光栅图像的图像元素。 适用于Opera，Chrome，Firefox和IE10（未经测试）。
这是一个演示 。 如果你首先使用encodeURIComponent ，你可以传入你自己的网址。 请注意，为了将参数传递给工作，它依赖于启用脚本，因此如果需要在<img>元素或css背景图像中使用它，则需要在服务器上生成svg文件。
解决方案3
2 2012-01-16 02:06:04
还没有，但Chrome 18将支持css过滤器 （今年晚些时候发布）。 SVG过滤器仅受Firefox支持。 您应该能够找到一致的canvas + javascript解决方案。
编辑：请参阅ErikDahlström关于替代解决方案的帖子。
解决方案4
1 2012-01-16 02:36:47
这是一个HTML5解决方案。 目前版本的Chrome支持： http ： //webdesignerwall.com/demo/html5-grayscale/
CSS无法在IE和Chrome中使用，但可以通过Chrome在CodePen中使用
[英]CSS not working in IE and Chrome, but works in CodePen via Chrome
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.