代码之家 › 专栏 › 技术社区 › Chris Pietschmann

Firefox的CSS过滤器是什么?

filter cross-browser firefox internet-explorer css

Chris Pietschmann · 技术社区 · 17 年前

有人知道Firefox的CSS过滤器是什么吗?最好是能够跨浏览器(Safari、WebKit、Firefox等)使用的答案。

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

更新:我知道过滤器是IE特有的功能。Firefox是否支持这些功能?

9 回复 | 直到 17 年前

Andre Bossard 17 年前

Nihilogic Javascript Image Effect Library :

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

它们也是基于JS的
Lab to experiment

祝你好运

Rudi 17 年前

“你的浏览器sux” 回应及更多一个。

通常CSS用于控制HTML内容的外观,而不是以巧妙的方式添加效果或编辑图像。您尝试使用javascript做的事情可能是可能的,但是面向行为的脚本可能仍然不太适合您想要做的调整(尽管类似于 this 在CSS/JS中是一个有趣且效率很低的冒险(愚蠢)。

需要 ImageMagick 是一个很好的小命令行工具,可用于您需要的所有图像效果,并且非常简单,可以单独使用,也可以在您选择的服务器端语言中使用。或者如果您使用的是PHP,我相信 PHP's GD library

John Millikin 17 年前

在其他浏览器中没有等价物。最接近的方法是使用图形库(如Canvas)并操作其中的图像,但是您必须自己编写操作,并且需要JavaScript。

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

FaerAnne Phrogz 12 年前

SVG filters applied to HTML content .

仅适用于Firefox3.1及以上版本,尽管我认为Safari也朝着同样的方向发展。

Geoff 17 年前

您需要什么特定的用例?

Steven Oxley 17 年前

filter -类型功能。CSS本身不允许你做这些事情。例如,仅使用CSS无法反转跨浏览器的图像。您必须有两个不同的图像副本(一个反转),或者您可以尝试使用Javascript,或者可能以完全不同的方式进行操作,但是没有一个简单的解决方案仅使用CSS。

garrow 17 年前

在这里,您可以使用javascript动态地将图像包装到SVG对象中,并尝试对其应用过滤器。

我怀疑这是否适用于背景图像,尽管也许通过许多巧妙的定位,它可能会起作用。

鲁迪有最好的答案,使用服务器端工具动态应用转换(或缓存以提高性能)将是最好的跨浏览器解决方案。

aWebDeveloper 11 年前

这是一个非常古老的问题,但是css已经更新到现在支持过滤器。更多信息请访问

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

语法

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

对于SVG元素的引用,请使用以下内容:

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

-2

superfireydave 17 年前

不是真的,希望永远不会有。它不是web标准CSS功能,因为您使用CSS格式化网页,而不是浏览器本身。有一天,其他网页设计师和开发人员认为他们应该按照自己的意愿设计我的浏览器,然后我就停止访问他们的网页了(我是作为一个前端网络人员说的)。