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

What's the CSS Filter alternative for Firefox?

提问by Chris Pietschmann

I'm using CSS Filters to modify images on the fly within the browser. These work perfectly in Internet Explorer, but aren't supported in Firefox.

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

Does anyone know what the CSS Filter equivalent for these is for Firefox? An answer that would work cross browser (Safari, WebKit, Firefox, etc.) would be preferred.

有谁知道 Firefox 的 CSS Filter 等价物是什么？一个可以跨浏览器（Safari、WebKit、Firefox 等）工作的答案将是首选。

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

Update: I know Filter is an IE specific feature. Is there any kind of equivalent for any of these that is supported by Firefox?

更新：我知道过滤器是 IE 特定的功能。Firefox 支持的任何这些是否有任何等价物？

采纳答案by Andre Bossard

Please check the Nihilogic Javascript Image Effect Library:

请检查Nihilogic Javascript 图像效果库：

• supports IE and Fx pretty well
• has a lot of effects

• 很好地支持 IE 和 Fx
• 有很多效果

You can find many other effects in the CVI Projects:

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

• they are also JS based
• there's a Lab to experiment

• 他们也是基于 JS
• 有一个实验室可以进行实验

Good Luck

祝你好运

回答by Rudi

Could you give us a concrete example of what exactly you're trying to do? You'd probably get fewer "Your brower sux"responses and more "How about trying this different approach?"ones.

你能给我们一个具体的例子来说明你到底想做什么吗？您可能会收到更少的“您的浏览器 sux”回复，而更多的是“尝试这种不同的方法怎么样？” 那些。

Normally CSS is used to control the look and feel of HTML content, not add effects or edit images in clever ways. What you're trying to do might be possible using javascript, but a behavior-oriented script still probably isn't very well suited for the kind of tweaking you want to do (although something like thisis a fun and very inefficient adventure in CSS / JS tomfoolery).

通常 CSS 用于控制 HTML 内容的外观和感觉，而不是巧妙地添加效果或编辑图像。您尝试做的事情可能可以使用 javascript，但面向行为的脚本可能仍然不太适合您想要做的那种调整（尽管像这样的事情在 CSS 中是一种有趣且非常低效的冒险/ JS 愚弄）。

I can't imagine a scenario when you would needthe client to perform image tweaking in real-time. You could modify images server-side and simply reference these modified versions with your CSS or possibly Javascript, depending on what you're doing exactly. ImageMagickis a great little command-line tool for all the image effects you would ever need, and is pretty simple to use by itself or within the server-side language of your choice. Or if you're using PHP, I believe PHP's GD libraryis pretty popular.

我无法想象您需要客户端实时执行图像调整的场景。您可以在服务器端修改图像，并根据您的具体操作简单地使用 CSS 或 Javascript 引用这些修改后的版本。ImageMagick是一个很棒的小型命令行工具，可用于您需要的所有图像效果，并且非常易于单独使用或在您选择的服务器端语言中使用。或者，如果您使用的是 PHP，我相信PHP 的 GD 库非常流行。

回答by Rudi

SVG filters applied to HTML content.

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

Only works in Firefox 3.1 and above, though I think Safari is heading in the same direction.

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

回答by John Millikin

There are no equivalents in other browsers. The closest you could get is using a graphics library like Canvas and manipulating the images in it, but you'd have to write the manipulations yourself and they'd require JavaScript.

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

---

---

filteris an IE-only feature -- it is not available in any other browser.

filter是 IE 独有的功能——它在任何其他浏览器中都不可用。

回答by Geoff

None that I know of. Filter was an IE only thing and I don't think any other browser has followed with similar functionality.

我所知道的都没有。过滤器是 IE 唯一的东西，我认为其他任何浏览器都没有遵循类似的功能。

What is there a specific use case you need?

您需要什么特定用例？

回答by Steven Oxley

I'm afraid that you are pretty much out of luck with most of the cross-browser filter-type functionality. CSS alone will not allow you to do most of these things. For example, there is no way to invert an image cross-browser just using CSS. You will have to have two different copies of the image (one inverted) or you could try using Javascript or maybe go about it a completely different way, but there is no simple solution solely in CSS.

恐怕您对大多数跨浏览器filter类型的功能都不太走运。仅靠 CSS 无法让您完成大部分这些事情。例如，无法仅使用 CSS 来反转图像跨浏览器。您将必须拥有图像的两个不同副本（一个反转），或者您可以尝试使用 Javascript 或以完全不同的方式进行处理，但是仅在 CSS 中没有简单的解决方案。

回答by aWebDeveloper

This is a very very old question but css has updated to now support filters. Read more about it at

这是一个非常古老的问题，但 css 已更新为现在支持过滤器。阅读更多关于它的信息

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

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

Syntax

句法

With a function, use the following:

对于函数，请使用以下内容：

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

For a reference to an SVG element, use the following:

要引用 SVG 元素，请使用以下内容：

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

回答by garrow

There are filters, such as Gaussian Blur et al in SVG, which is supported natively by most browsers except IE.

SVG中有过滤器，例如Gaussian Blur等，除IE外，大多数浏览器都原生支持。

Pure thought experiment here, you could wrap your images in an SVG object on the fly with javascript and attempt to apply filters to them.

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

I doubt this would work for background images, though perhaps with alot of clever positioning it could work.

我怀疑这是否适用于背景图像，尽管可能有很多巧妙的定位它可以工作。

It's unlikely to be a realistic solution. If you don't want to permanently modify your source images, Rudihas the best answer, using server side tools to apply transformations on the fly (or cached for performance) will be the best cross browser solution.

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

回答by superfireydave

Not really, and hopefully there never will be. It's not a web standard CSS feature for the reason that you're using CSS to format the webpage, not the browser itself. The day that other web designers and developers think they should style my browser how they wish and are then do so is the day I stop visiting their pages (and I say this as a front end web guy).

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