FirefoxのCSSフィルターの代替手段は何ですか？

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

質問

CSSフィルターを使用して、ブラウザー内でその場で画像を変更しています。これらはInternet Explorerで完全に機能しますが、Firefoxではサポートされていません。

これらに相当するCSSフィルターがFirefoxにどのようなものかを知っている人はいますか？クロスブラウザ（Safari、WebKit、Firefoxなど）で機能する回答が推奨されます。

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

更新：フィルターはIE固有の機能であることは知っています。 Firefoxでサポートされている、これらのいずれかに相当するものはありますか？

役に立ちましたか？

解決

Nihilogic Javascript Image Effect Library を確認してください：

  • IEとFxをかなりサポートしています
  • 多くの効果があります

CVIプロジェクトで他の多くの効果を見つけることができます：

幸運

他のヒント

あなたがやろうとしていることの具体的な例を挙げていただけますか？おそらく、＆quot;ブロワーサックス＆quot; の応答は少なくなり、＆quot;この別のアプローチを試してみてはどうですか？＆quot; 。

通常、CSSは、HTMLコンテンツのルックアンドフィールを制御するために使用され、効果を追加したり、画像を巧妙に編集したりすることはありません。あなたがやろうとしていることはjavascriptを使用して可能かもしれませんが、行動指向のスクリプトはおそらくあなたがしたい種類の微調整にはあまり適していません（これは、CSS / JS tomfooleryの面白くて非効率的な冒険です。

リアルタイムで画像調整を実行するためにクライアントを必要にするシナリオは想像できません。画像をサーバー側で変更し、これらの変更されたバージョンを、正確に何をしているかに応じて、CSSまたはJavascriptで参照することができます。 ImageMagick は、必要なすべてのイメージエフェクト用の優れた小さなコマンドラインツールであり、非常にシンプルです。単独で、または選択したサーバー側言語内で使用します。または、PHPを使用している場合、 PHPのGDライブラリは非常に人気があると思います。

他のブラウザには同等のものはありません。最も近い方法は、Canvasのようなグラフィックライブラリを使用して、その中の画像を操作することですが、操作を自分で記述する必要があり、JavaScriptが必要になります。

filter はIE専用の機能です。他のブラウザでは使用できません。

HTMLコンテンツに適用されるSVGフィルター。

Firefox 3.1以降でのみ動作しますが、Safariは同じ方向に向かっていると思います。

知りません。フィルターはIEのみのものであり、他のブラウザーが同様の機能を備えているとは思いません。

必要な特定のユースケースは何ですか？

クロスブラウザの filter タイプの機能のほとんどがうまくいかないのではないかと思います。 CSSだけでは、これらのほとんどを行うことはできません。たとえば、CSSを使用するだけで画像クロスブラウザを反転する方法はありません。画像の2つの異なるコピー（1つを反転）する必要があります。または、Javascriptを使用するか、まったく異なる方法で試すことができますが、CSSだけで簡単な解決策はありません。

SVGにはGaussian Blurなどのフィルターがあり、IEを除くほとんどのブラウザーでネイティブにサポートされています。

ここでは純粋な思考実験であり、JavaScriptを使用してその場でSVGオブジェクトに画像をラップし、フィルターを適用しようとすることができます。

これは背景画像では機能しないと思いますが、おそらく巧妙な配置があれば機能する可能性があります。

現実的な解決策ではないでしょう。ソース画像を恒久的に変更したくない場合は、 Rudi が最良の答えです。サーバー側のツールを使用してオンザフライで変換を適用（またはパフォーマンスのためにキャッシュ）するのが最適なクロスブラウザーソリューションになります。

これは非常に古い質問ですが、cssはフィルターをサポートするように更新されました。詳細については、

をご覧ください。

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

構文

関数では、次を使用します：

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

SVG要素への参照には、次を使用します。

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

実際はそうではありません。ブラウザ自体ではなく、CSSを使用してWebページをフォーマットしているため、Web標準のCSS機能ではありません。他のWebデザイナーや開発者が自分のブラウザを自分の好みに合わせてスタイルを整えるべきだと思う日は、私が彼らのページにアクセスするのをやめる日です（そしてこれをフロントエンドのWebガイと言います）。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top