Firefox的CSS筛选器替代品是什么?

时间:2020-03-06 14:57:36  来源:igfitidea点击:

我正在使用CSS过滤器在浏览器中即时修改图像。这些可以在Internet Explorer中完美地运行,但是在Firefox中不受支持。

有谁知道适用于Firefox的CSS筛选器等效项?最好使用跨浏览器(Safari,WebKit,Firefox等)的答案。

<style type="text/css">
    .CSSClassName {filter:Invert;}
    .CSSClassName {filter:Xray;}
    .CSSClassName {filter:Gray;}
    .CSSClassName {filter:FlipV;}
</style>

更新:我知道过滤器是IE的特定功能。 Firefox支持的任何一种等同形式吗?

解决方案

在其他浏览器中没有等效项。我们能获得的最接近的结果是使用诸如Canvas之类的图形库并处理其中的图像,但是我们必须自己编写操作,并且它们需要JavaScript。

"过滤器"是仅IE的功能-在任何其他浏览器中均不可用。

我不知道。过滤器仅是IE浏览器,我认为没有其他浏览器具有类似的功能。

我们需要什么特定用例?

恐怕我们几乎无法使用大多数跨浏览器的"过滤器"类型的功能。单靠CSS并不能完成大多数这些事情。例如,仅使用CSS就无法反转图像跨浏览器。我们将不得不拥有两个不同的图像副本(一个倒置),或者我们可以尝试使用Javascript或者以完全不同的方式进行处理,但是仅CSS中没有简单的解决方案。

并非如此,希望永远不会。这不是Web标准的CSS功能,原因是我们使用CSS来格式化网页,而不是浏览器本身。其他Web设计师和开发人员认为他们应该按照自己的意愿来设计我的浏览器的那一天,然后再这样做。那一天是我停止访问他们的页面的时候(我说这是前端Web专家)。

我们能否举一个具体例子说明我们到底想做什么?我们可能会收到较少的"浏览器辅助"响应,而更多的是"尝试这种不同的方法呢?"那些。

通常,CSS用于控制HTML内容的外观,而不是以巧妙的方式添加效果或者编辑图像。我们正在尝试使用javascript进行操作,但是面向行为的脚本可能仍然不太适合我们要进行的调整(尽管类似的事情在CSS中是一种有趣且非常低效的冒险) / JS tomfoolery)。

我无法想象需要客户端实时执行图像调整的情况。我们可以在服务器端修改图像,并根据确切操作简单地使用CSS或者Javascript引用这些修改后的版本。 ImageMagick是一款出色的小型命令行工具,可满足我们所需的所有图像效果,并且可以单独使用,也可以在我们选择的服务器端语言中使用,非常简单。或者,如果我们使用的是PHP,我相信PHP的GD库非常受欢迎。

请检查Nihilogic Javascript图像效果库:

  • 很好地支持IE和Fx
  • 有很多影响

我们可以在CVI项目中找到许多其他效果:

  • 它们也是基于JS的
  • 有一个实验实验室

祝你好运

有一些过滤器,例如SVG中的Gaussian Blur等人,除IE之外,大多数浏览器都支持该过滤器。

在这里进行纯粹的思想实验,我们可以使用javascript将图像实时包装在SVG对象中,并尝试对其应用过滤器。

我怀疑这是否适用于背景图像,尽管也许可以通过很多巧妙的定位来实现。

这不太可能是一个现实的解决方案。如果我们不想永久修改源图像,Rudi会提供最佳解决方案,使用服务器端工具动态应用转换(或者为性能而缓存)将是最佳的跨浏览器解决方案。

SVG过滤器应用于HTML内容。

仅适用于Firefox 3.1及更高版本,尽管我认为Safari朝着相同的方向发展。