Q

css経由でクロムのグレースケール

2012-01-15 6 views 3 likes

3

css経由でクロムにグレースケールイメージを作成する方法はありますか？css経由でクロムのグレースケール

私はthisを試してみましたが、まだクロム

2012-01-15 alex

A

答えて

7

サポートは、現在のバージョン19.0.1084.46

ので、-webkit-フィルタから追加されました：グレースケールは、（1）動作し、これはwebkitのためのより良いとSVGよりもアプローチが容易です。..

2012-05-28 08:22:26 hjindal

+0

素晴らしい作品です！ –

2

の最新バージョンでは動作しませんが、クロム18は、（今年後半にリリース）css filtersをサポートします。 SVGフィルタはFirefoxでのみサポートされています。あなたは一貫したキャンバス+ javascriptソリューションを見つけることができるはずです。

編集：代替ソリューションについては、ErikDahlströmの記事を参照してください。

2012-01-16 02:06:04 bennedich

+1

SVGフィルタは、SVGコンテンツのすべてのブラウザでサポートされています（IE10も含む）。しかし、現時点では、FirefoxがHTMLコンテンツに直接svgフィルタを使用することをサポートする唯一のブラウザであることは事実です。 –

+0

真実、私は文脈についてより具体的であったはずです。 – bennedich

1

ここにHTML5ソリューションがあります。 Chromeの現在のバージョンでサポートされています：http://webdesignerwall.com/demo/html5-grayscale/

2012-01-16 02:36:47 henryaaron

+0

私はCSSの解決策が必要です – alex

5

もう1つの解決策は間接レベルのレベルです。

基本的に<img src="wrapper.svg"/>ここで、wrapper.svgはsvgにsvgフィルタを適用し、svgにはラスタイメージを示すimage要素があります。 Opera、Chrome、Firefox、おそらくIE10（テストされていない）で動作します。

ここにはdemoがあります。 encodeURIComponent最初にURLを渡すことができます。ただし、スクリプトを有効にするためにパラメータを渡すためには、< img>要素やCSSバックグラウンドイメージで使用する必要がある場合は、サーバー上にsvgファイルを生成する必要があります。 WebKitの中にネイティブCSSフィルタの

2012-01-17 14:11:15

+1

うわー、それは本当に甘いです！ただ頭を上げる。私はそれを埋め込み、2つのマイナーな調整が必要でした。大文字と小文字を区別するための '.toLowerCase（）'を削除し、 'arr'をオブジェクト' {} 'にする必要があります。 – bennedich

+0

イメージをホバリングするときにグレースケール効果が必要です。これはあなたのソリューションで可能ですか？ – alex

+0

ありがとう、私は上記の例を推奨された修正で更新し、アニメーション化された例を追加しました：http：//dahlström.net/svg/filters/make-grayscale-filter-on-hover.svg#url=boston.jpg（worked OperaとFirefoxでうまくいきました.Chromeはmouseoutイベントを得ていないようでしたが、スタンドアローンでロードされたときだけ、IEはSVGアニメーションをサポートしていません。スクリプトを使ってアニメーションを行うことも可能です。 –

関連する問題