Firefox 的 CSS 过滤器替代品是啥？

Posted 2023-03-06

【中文标题】Firefox 的 CSS 过滤器替代品是啥？

【英文标题】：What's the CSS Filter alternative for Firefox?Firefox 的 CSS 过滤器替代品是什么？

【发布时间】：2010-09-14 10:36:39

【问题描述】：

我正在使用 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 是否支持其中任何一种等效项？

【问题讨论】：

在Firefox中使用SVG怎么样？

【参考方案1】：

在其他浏览器中没有等价物。最接近的方法是使用像 Canvas 这样的图形库并处理其中的图像，但您必须自己编写这些操作，而且它们需要 javascript。

---

filter 是一个仅限 IE 的功能——它在任何其他浏览器中都不可用。

【讨论】：

是的，我知道过滤器是 IE 特有的功能。这就是为什么我要问是否有任何在 Firefox 中有效的等价物。

【参考方案2】：

据我所知没有。过滤器是 IE 独有的东西，我认为没有任何其他浏览器具有类似的功能。

您需要什么特定的用例？

【参考方案3】：

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

【参考方案4】：

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

【讨论】：

过滤器不对浏览器设置样式。

哦，对了，我在这里切线了，因为据我所知，浏览器（即滚动条颜色等）样式也是 IE 特定的，并且类似地实现到过滤器。我道歉并将其归咎于 2 小时的睡眠：

【参考方案5】：

您能给我们举一个具体的例子来说明您到底想要做什么吗？您可能会得到更少的“Your brower sux”响应，而更多“尝试这种不同的方法怎么样？”。

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

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

【参考方案6】：

请查看Nihilogic Javascript Image Effect Library:

很好地支持 IE 和 Fx 有很多作用

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

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

祝你好运

【参考方案7】：

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

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

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

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

【参考方案8】：

SVG filters applied to HTML content.

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

【参考方案9】：

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

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

语法

使用函数，使用以下内容：

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

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

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