Was ist der CSS-Filter-alternative für Firefox?
Ich bin mit CSS-Filter zur Bearbeitung von Bildern on-the-fly im browser. Diese Arbeit perfekt in Internet Explorer, aber werden nicht unterstützt in Firefox.
Weiß jemand, was die CSS-Filter äquivalent für diese ist für Firefox? Eine Antwort, die funktionieren würde, cross-browser (Safari, WebKit, Firefox, etc.) bevorzugt würde.
<style type="text/css">
.CSSClassName {filter:Invert;}
.CSSClassName {filter:Xray;}
.CSSClassName {filter:Gray;}
.CSSClassName {filter:FlipV;}
</style>
Update: ich weiß-Filter ist ein IE spezifisches feature. Gibt es eine Art von äquivalent für diese, die getragen wird von Firefox?
- Wie wärs mit SVG in firefox?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Bitte überprüfen Sie die Nihilogic Javascript Image Effekt-Library:
Finden Sie viele andere Effekte in der CVI-Projekte:
Glück
Könnten Sie uns ein konkretes Beispiel, was genau Sie zu tun versuchen? Sie würden wahrscheinlich weniger "Dein brower sux" Antworten und mehr ", Wie etwa den Versuch, diesen anderen Ansatz?" diejenigen.
Normalerweise CSS wird verwendet, um zu Steuern das Aussehen und das Gefühl von HTML-Inhalten, keine Effekte hinzufügen oder Bearbeiten von Bildern in clevere Art und Weise. Was Sie versuchen zu tun, möglich sein könnte, mithilfe von javascript, sondern ein Verhaltens-orientiertes Skript noch wahrscheinlich nicht sehr gut geeignet für die Art der Optimierungen Sie machen möchten (obwohl so etwas wie diese ist ein Spaß und sehr ineffizient Abenteuer in der CSS /JS-Unsinn).
Ich kann mir nicht vorstellen, ein Szenario, wenn Sie würde müssen der Kunde eine Bild optimieren in Echtzeit. Sie ändern könnte, Bilder, server-Seite und verweisen Sie einfach auf diese modifizierten Versionen mit Ihren CSS oder eventuell Javascript, je nachdem, was Sie tun, genau. ImageMagick ist ein tolles, kleines Kommandozeilen-tool für alle image-Effekte, die Sie jemals brauchen würden, und ist ziemlich einfach zu bedienen durch sich selbst oder innerhalb der server-Seite Sprache Ihrer Wahl. Oder wenn Sie mit PHP, ich glaube PHP GD-Bibliothek ist ziemlich beliebt.
Gibt es keine Entsprechungen in anderen Browsern. Die nächsten, die Sie bekommen konnte ist mit Hilfe eines Grafik-Bibliothek wie eine Leinwand und die Manipulation der Bilder, aber Sie würden zu schreiben, das Manipulationen selbst und Sie würde erfordern JavaScript.
filter
ist eine IE-only-Funktion -- es ist nicht verfügbar in jedem anderen browser.SVG-Filter auf HTML-Inhalte.
Funktioniert nur in Firefox 3.1 und höher, obwohl ich denke, Safari ist in die gleiche Richtung.
Keiner, den ich kenne. Filter war ein IE einzige Sache, und ich glaube nicht, dass alle anderen browser verfolgt hat, mit ähnlichen Funktionen.
Was es da einen bestimmten Fall, die Sie benötigen?
Fürchte ich, dass Sie ziemlich viel Pech mit den meisten cross-browser -
filter
- Typ-Funktionalität. CSS allein wird Ihnen nicht erlauben, um die meisten dieser Dinge. Zum Beispiel gibt es keine Möglichkeit, ein Bild umkehren cross-browser nur mit CSS. Sie haben zwei verschiedene Kopien des Bildes (einen invertiert) oder Sie könnten versuchen, mit Javascript, oder vielleicht ist es darum gehen einen ganz anderen Weg, aber es gibt keine einfache Lösung, die ausschließlich in CSS.Gibt es Filter wie "Gaußscher Weichzeichner" et al in SVG, die nativ unterstützt wird von den meisten Browsern außer dem IE.
Reines Gedankenexperiment hier, könnten Sie wickeln Sie Ihre Bilder in ein SVG-Objekt auf das Fliegen mit javascript, und versuchen Sie die Filter anwenden, um Ihnen.
Ich bezweifle, dass das funktionieren würde für hintergrund-Bilder, wenn auch vielleicht mit viel geschickte Positionierung, es könnte funktionieren.
Es ist unwahrscheinlich, dass eine realistische Lösung. Wenn Sie nicht wollen, um dauerhaft ändern Sie Ihre Quell-Bilder, Rudi hat die beste Antwort, mithilfe des server-side-tools anwenden von Transformationen on the fly " (oder Cache für die performance) werden sich die besten cross-browser-Lösung.
Dies ist eine sehr, sehr alte Frage, aber css hat aktualisiert und unterstützen jetzt die Filter. Lesen Sie mehr darüber auf
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
Syntax
Mit einer Funktion, die folgenden verwenden:
Für einen Verweis zu einer SVG-element, verwenden Sie die folgende:
Nicht wirklich, und hoffentlich gibt es nie sein wird. Es ist nicht web-standard CSS-feature aus dem Grund, dass Sie verwenden CSS zur Formatierung der Webseite, nicht der browser selbst. Der Tag, der anderen web-Designern und Entwicklern, die meinen, Sie müssten mein Stil-browser, wie Sie wollen, und dann tun, ist der Tag, den ich aufhören, den Besuch Ihrer Seiten (und das sage ich als front-end-web-Typ).