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

问题描述：

我使用CSS滤镜在浏览器中实时修改图像。这些在Internet Explorer中完美工作，但在Firefox中不受支持。什么是Firefox的CSS过滤器替代品？

有谁知道这些CSS过滤器等同于Firefox？可以跨浏览器（Safari，WebKit，Firefox等）工作的答案将是首选。

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

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

如何使用[SVG]（http：// de veloper.mozilla.org/en/SVG_in_Firefox）在Firefox中？ – 2008-10-01 14:53:07

答

请检查Nihilogic Javascript Image Effect Library：

支持IE和FX很好
有很大的影响

您可以找到CVI Projects多方面的影响：

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

好运

答

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

filter是一个IE浏览器的功能 - 它不适用于任何其他浏览器。

是的，我知道过滤器是一个IE特定功能。这就是为什么我问是否有任何类似的工作在Firefox中。 – 2008-10-01 04:23:04

答

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

什么是您需要的特定用例？

答

恐怕你的交叉浏览器filter类型的功能非常不幸。 CSS本身不会让你做大部分这些事情。例如，只有使用CSS才能颠倒跨浏览器的图像。你必须有两个不同的图像副本（一个倒置），或者你可以尝试使用Javascript，或者以完全不同的方式进行操作，但是CSS中没有简单的解决方案。

答

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

过滤器没有风格的浏览器。 – Geoff 2008-10-01 04:52:18

答

您能否给我们一个具体的例子，说明您正在尝试做什么？你可能会减少“Your brower sux” response and more “试试这种不同的方法怎么样？”个。

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

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

答

有过滤器，如高斯模糊等人在SVG，其由除了IE大多数浏览器本身支持。

纯思维实验在这里，你可以用JavaScript包装你的图像在一个SVG对象，并尝试应用过滤器。

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

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

答

SVG filters applied to HTML content。

只适用于Firefox 3.1及以上版本，不过我认为Safari的走向是一致的。

答

这是一个非常非常古老的问题，但css已经更新到现在支持过滤器。了解更多关于它在

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

语法

与函数，使用以下：

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

对于对SVG元素的引用，使用以下：

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

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

相关推荐