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

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图像效果库 ：

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

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

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

祝好运

Answer 2

你能给我们一个具体的例子说明你究竟想做什么吗？ 你可能会得到更少的“你的浏览器sux”响应和更多“如何尝试这种不同的方法？” 那些。

通常，CSS用于控制HTML内容的外观，而不是以巧妙的方式添加效果或编辑图像。 你现在要做的使用JavaScript是可能的，但行为导向脚本仍然可能不是非常适合那种调整你想做的事（尽管类似的这是一个有趣和CSS非常低效的冒险/ JS tomfoolery）。

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

Answer 3

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

---

filter是IE的唯一功能 - 它在任何其他浏览器中都不可用。

Answer 4

应用于HTML内容的SVG过滤器 。

仅适用于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功能。 其他网页设计师和开发人员认为他们应该按照自己的意愿设置样式的那一天，然后这样做是我停止访问他们的页面的那一天（我说这是一个前端网络人员）。