通过css镀铬的灰度

Question

有没有办法通过CSS在chrome中制作灰度图像？

我试过这个,但不适用于最新版本的chrome

Answer 1

从当前版本19.0.1084.46添加了对webkit中的本机CSS过滤器的支持

所以-webkit-filter:grayscale(1)可以工作,哪种方法比SVG更好更简单？

Answer 2

另一种解决方案是具有间接级别的svg.

基本上,<img src="wrapper.svg"/>wrapper.svg将svg过滤器应用于svg,svg有一个指向光栅图像的图像元素.适用于Opera,Chrome,Firefox和IE10(未经测试).

这是一个演示.如果你encodeURIComponent是第一个,你可以传入你自己的网址.请注意,为了将参数传递给工作,它依赖于启用脚本,因此如果需要在<img>元素或css背景图像中使用它,则需要在服务器上生成svg文件.