Was ist die CSS-Filter Alternative für Firefox?

StackOverflow https://stackoverflow.com/questions/156116

Frage

Ich bin CSS-Filter unter Verwendung der Bilder on the fly im Browser zu ändern. Diese funktionieren perfekt in Internet Explorer, sind aber nicht in Firefox unterstützt.

Wer weiß, was die CSS-Filter Äquivalent für diese für Firefox ist? Eine Antwort, die Cross-Browser (Safari, WebKit, Firefox, etc.) bevorzugt würde funktionieren würde. 

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

Update: Ich weiß, Filter ist eine IE-spezifische Funktion. Gibt es irgendeine Art von Äquivalent für eine dieser, die von Firefox unterstützt wird?

War es hilfreich?

Lösung

Bitte überprüfen Sie die Nihilogic Javascript Bildeffekt Bibliothek :

  • unterstützt IE und Fx ziemlich gut
  • hat viele Effekte

Sie können viele andere Effekte in der CVI Projekte finden:

Good Luck

Andere Tipps

Könnten Sie uns ein konkretes Beispiel dafür, was genau zu tun, Sie versuchen? Sie würden vermutlich weniger "Ihr Brower sux" Antworten und mehr "Wie wäre es mit diesem anderen Ansatz versuchen?" Einsen.

get

Normalerweise CSS verwendet, um das Aussehen und das Gefühl von HTML-Inhalten zu kontrollieren, nicht mit Spezialeffekten oder Bilder auf clevere Weise bearbeiten. Was Sie versuchen könnten möglich sein, zu tun, mit Javascript, aber ein verhaltensorientierte Script noch ist wahrscheinlich nicht sehr gut geeignet für die Art von Zwicken Sie (obwohl so etwas wie diese ist ein Spaß und sehr ineffizient Abenteuer in CSS / JS tomfoolery).

Ich kann kein Szenario vorstellen, wenn Sie sich Notwendigkeit die Client-Image Zwicken in Echtzeit durchzuführen. Sie könnten Bilder serverseitige ändern und verweisen Sie einfach diese modifizierten Versionen mit Ihrem CSS oder möglicherweise Javascript, je nachdem, was Sie genau tun. ImageMagick ist ein großartiges kleines Kommandozeilen-Tool für alle Bildeffekte, die Sie jemals brauchen würde, und ist ziemlich einfach von sich selbst oder innerhalb der serverseitigen Sprache Ihrer Wahl zu verwenden. Oder wenn Sie PHP verwenden, ich glaube, PHP GD-Bibliothek ist ziemlich beliebt.

Es gibt keine Entsprechungen in anderen Browsern. Die nächstgelegene Sie könnte bekommen, ist eine Grafikbibliothek wie Leinwand verwenden und die Manipulation der Bilder in ihm, aber Sie würden die Manipulationen selbst schreiben müssen und sie würden JavaScript erforderlich.

filter ist eine IE-only-Funktion - es ist in jedem anderen Browser nicht verfügbar ist

.

SVG-Filter HTML-Inhalt angewendet.

funktioniert nur in Firefox 3.1 und höher, obwohl ich glaube, Safari in der gleichen Richtung geht.

Keine, die ich kenne. Filter war ein IE einzige Sache, und ich glaube nicht, dass andere Browser mit ähnlicher Funktionalität gefolgt ist.

Was gibt es einen speziellen Anwendungsfall benötigen Sie?

Ich habe Angst, dass Sie ziemlich viel Glück mit den meisten der Cross-Browser-filter-Typ-Funktionalität sind. CSS allein wird nicht zulassen, dass Sie die meisten dieser Dinge zu tun. Zum Beispiel gibt es keine Möglichkeit, ein Bild Cross-Browser zu invertieren nur mit CSS. Sie werden zwei verschiedene Kopien des Bildes haben (einen invertiert) oder Sie können eine ganz andere Art und Weise mit Javascript oder vielleicht gehen versuchen es, aber es gibt keine einfache Lösung nur in CSS.

Es gibt Filter, wie Gaussian Blur et al in SVG, die von den meisten Browsern außer IE nativ unterstützt wird.

reine Gedankenexperiment hier, können Sie Ihre Bilder in einem SVG-Objekt on the fly mit Javascript wickeln könnte, und versuchen Sie Filter auf sie anzuwenden.

Ich bezweifle, dass dies für die Hintergrundbilder funktionieren würde, wenn auch vielleicht mit vielen geschickten Positionierung könnte es funktionieren.

Es ist unwahrscheinlich, dass eine realistische Lösung sein. Wenn Sie dauerhaft nicht Ihre Quellbilder ändern möchten, Rudi hat die beste Antwort, Server-Seite Tools Transformationen anwenden on the fly (oder für die Leistung im Cache) wird die beste Cross-Browser-Lösung sein.

Dies ist eine sehr, sehr alte Frage, aber CSS wird aktualisiert, um nun Filter zu unterstützen. Lesen Sie mehr darüber in

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

Syntax

Mit einer Funktion, verwenden Sie die folgende: 

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

Für einen Verweis auf ein SVG-Element, verwenden Sie wie folgt vor: 

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

Nicht wirklich, und hoffentlich wird es auch nie sein. Es ist nicht eine Web-Standard CSS-Funktion für den Grund, dass Sie CSS verwenden die Web-Seite zu formatieren, nicht der Browser selbst. Der Tag, an andere Web-Designer und Entwickler denken sollten sie meinen Browser Stil, wie sie wollen und dann tun, ist der Tag, als ich ihre Seiten aufhören zu besuchen (und das sage ich als Front-End-Web-Typ).

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top