什么是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功能。 其他網頁設計師和開發人員認為他們應該按照自己的意願設置樣式的那一天，然后這樣做是我停止訪問他們的頁面的那一天（我說這是一個前端網絡人員）。