Question

我正在使用CSS过滤器在浏览器中动态修改图像。这些在Internet Explorer中完美运行，但在Firefox中不受支持。

有谁知道这些针对Firefox的CSS Filter相当于什么？一个可以跨浏览器工作的答案（Safari，WebKit，Firefox等）将是首选。

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

更新：我知道Filter是IE特有的功能。 Firefox支持的任何一种等效物都有吗？

Answer 1

请查看Nihilogic Javascript Image Effect Library：

非常支持IE和Fx
有很多效果

您可以在CVI Projects中找到许多其他效果：

他们也是基于JS的
有一个Lab to experiment

祝你好运

Answer 2

你能否举一个具体的例子说明你究竟想做什么？您可能会减少“您的浏览器sux”响应以及更多“如何尝试这种不同的方法？”。

通常，CSS用于控制HTML内容的外观，而不是以巧妙的方式添加效果或编辑图像。您尝试使用javascript可能会做什么，但是面向行为的脚本可能仍然不太适合您想要做的调整（尽管像this这样的东西很有趣而且非常有用CSS / JS tomfoolery中的低效冒险。）

我无法想象当您需要客户端实时执行图像调整时的情况。您可以修改服务器端的图像，只需使用您的CSS或Javascript引用这些修改后的版本，具体取决于您正在做什么。 ImageMagick是一个很棒的命令行工具，可用于您需要的所有图像效果，并且可以单独使用或在您选择的服务器端语言中使用。或者，如果您使用的是PHP，我相信PHP's GD library非常受欢迎。

Answer 3

其他浏览器中没有等效内容。你可以得到的最接近的是使用像Canvas这样的图形库并操纵其中的图像，但是你必须自己编写这些操作并且需要JavaScript。

filter是一项仅限IE的功能 - 在任何其他浏览器中都无法使用。

Answer 4

SVG filters applied to HTML content

仅适用于Firefox 3.1及更高版本，但我认为Safari正朝着同一方向发展。

Answer 5

我不知道。过滤器只是一个IE浏览器，我认为其他任何浏览器都没有类似的功能。

您需要具体的用例是什么？

Answer 6

我担心你对大多数跨浏览器filter类型的功能感到非常不满意。仅CSS不允许你做大部分这些事情。例如，没有办法只使用CSS反转图像跨浏览器。你将不得不有两个不同的图像副本（一个倒置）或者你可以尝试使用Javascript或者可能采用完全不同的方式，但是只有CSS中没有简单的解决方案。

Answer 7

有一些过滤器，例如SVG中的Gaussian Blur等，除了IE之外，大多数浏览器本身都支持这种过滤器。

纯思想实验在这里，您可以使用javascript动态地将图像包装在SVG对象中，并尝试对其应用过滤器。

我怀疑这适用于背景图像，但也许有很多聪明的定位可以起作用。

这不太可能是一个现实的解决方案。如果您不想永久修改源图像， Rudi 有最佳答案，使用服务器端工具即时应用转换（或缓存以提高性能）将是最佳的跨浏览器解决方案。

Answer 8

这是一个非常古老的问题，但css已更新为现在支持过滤器。

了解更多相关信息

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

<强>语法

使用功能，请使用以下内容：

filter: <filter-function> [<filter-function>]* | none

要获得对SVG元素的引用，请使用以下命令：

filter: url(svg-url#element-id)

Answer 9

不是真的，希望永远不会有。由于您使用CSS格式化网页而不是浏览器本身，因此它不是Web标准CSS功能。其他网页设计师和开发人员认为他们应该按照自己的意愿设置样式的那一天，然后这样做是我停止访问他们的页面的那一天（我说这是一个前端网络人员）。

什么是Firefox的CSS过滤器替代品？

9 个答案: