img {
-webkit-filter：grayscale （100％）; / * Chrome、Safari、Opera * /
フィルター： グレースケール（100％）;
}
フィルター機能
注： 通常、フィルターはパーセンテージ（75％など）を使用しますが、小数（0.75など）を使用して表現することもできます。
| フィルタ | 説明文 |
|---|---|
| 無し | デフォルト値は無効です。 |
| ぼかし（px） | 画像にガウスぼかしを設定します。「半径」の値は、ガウス関数の標準偏差、または画面上で融合されるピクセルの数を設定するため、値が大きいほどぼかしが大きくなります。 設定値がない場合、デフォルトは0です。パーセンテージ値は受け入れられません。 |
| 明るさ（％） | 画像に線形乗算を適用して、画像を明るくまたは暗くします。値が0％の場合、イメージは完全に黒になります。値が100％の場合、画像に変化はありません。他の値は線形乗数効果に対応します。100％を超える値も可能で、画像は以前より明るくなります。設定値がない場合、デフォルトは1です。 |
| コントラスト（％） | 画像のコントラストを調整します。値が0％の場合、イメージは完全に黒になります。値は100％で、画像は変更されません。値は100％を超える可能性があります。つまり、より低いコントラストが使用されます。値が設定されていない場合、デフォルトは1です。 |
| ドロップシャドウ（hシャドウvシャドウブラースプレッドカラー） | 画像に影効果を設定します。影は画像の下で合成され、特定の色で描画できるマスクマップのオフセットバージョンであるぼやけを持たせることができます。この関数は、「CSS3バックグラウンドで定義された」タイプ<shadow>の値を受け入れますが、 "inset"キーワードは許可されません。この関数は、既存のボックスシャドウボックスシャドウプロパティと非常によく似ています。違いは、一部のブラウザーは、フィルターを介してハードウェアアクセラレーションを提供してパフォーマンスを向上させることです。
注：Webkitや他の一部のブラウザーは4番目の長さをサポートしていないため、追加してもレンダリングされません。 <color> （オプション）この値の可能なキーワードとタグを確認します。設定されていない場合、色の値はブラウザに基づいています。Gecko（Firefox）、Presto（Opera）、Trident（Internet Explorer）では、色color属性値が適用されます。また、色の値を省略した場合、WebKitの影は透明になります。 |
| グレースケール（％） | 画像をグレースケール画像に変換します。値は、変換のスケールを定義します。100％の値は完全にグレースケール画像に変換され、0％の値は画像に変化がありません。0％から100％の値は、エフェクトの線形乗数です。設定しない場合、デフォルト値は0です。 |
| 色相回転（度） | 画像に色相回転を適用します。「角度」の値は、画像が調整されるカラーサークルの角度の値を設定します。値が0degの場合、画像に変化はありません。値が設定されていない場合、デフォルト値は0degです。この値には最大値はありませんが、360度を超える値は別のラウンドと同等です。 |
| 反転（％） | 入力画像を反転させます。値は、変換のスケールを定義します。値の100％が完全に逆になります。0％の値は、画像に変化がないことを意味します。0％から100％の値は、エフェクトの線形乗数です。値が設定されていない場合、値はデフォルトで0になります。 |
| 不透明度（％） | 画像の透明度を変換します。値は、変換のスケールを定義します。0％の値は完全な透明度を意味し、100％の値は画像に変化がないことを意味します。0％から100％の間の値は、エフェクトの線形乗数であり、これは画像サンプルの数を乗算することと同じです。値が設定されていない場合、値はデフォルトで1になります。この関数は、既存の不透明度プロパティと非常によく似ています。違いは、フィルターによって、一部のブラウザーはハードウェアアクセラレーションを提供してパフォーマンスを向上させることです。 |
| 飽和する（％） | 画像の彩度を変換します。値は、変換のスケールを定義します。値0％は完全に飽和していないことを意味し、値100％は画像に変化がないことを意味します。その他の値は、エフェクトの線形乗数です。100％を超える値が許可され、飽和度が高くなります。値が設定されていない場合、値はデフォルトで1になります。 |
| セピア（％） | 画像をセピア色に変換します。値は、変換のスケールを定義します。100％の値は完全に濃い茶色であり、0％の値は画像を変更しません。0％から100％の値は、エフェクトの線形乗数です。設定しない場合、デフォルト値は0です。 |
| url（） | URL関数は、SVGフィルターを設定するXMLファイルを受け入れ、特定のフィルター要素を指定するためのアンカーポイントを含めることができます。 たとえば、次のとおりです。 filter ：url （svg - url ＃element-id） |
| 初期 | プロパティをデフォルト値に設定します。参照： CSS初期キーワード |
| 受け継ぐ | この属性を親要素から継承するには、CSS inheritキーワードを参照してください。 |