CSS3フィルタ（フィルタ）の特性
例
黒と白の写真（100％グレー）にすべての色を編集します。
-webkit-フィルタ：グレースケール（100％ ）; / *クロム、サファリ、オペラ* /
フィルター：グレースケール（100％）。
}
»をお試しください
定義と使用
フィルタ属性が要素を定義する（一般的に<IMG>）視覚効果（例：ファジィと彩度）。
| デフォルト： | なし |
|---|---|
| 継承： | いいえ |
| アニメーションのサポート： | はい。 詳細はで見つけることができますCSSアニメーション |
| バージョン： | CSS3 |
| JavaScriptシンタックス： | 「グレースケール（100％.style.WebkitFilter =オブジェクト）」 >>しようとします |
ブラウザのサポート
表中の数字は、メソッドのバージョン番号をサポートする最初のブラウザを表します。
すぐに指定されたブラウザ-webkit-プレフィックスの番号の後。
| プロパティ | |||||
|---|---|---|---|---|---|
| フィルタ | 18.0 -webkit- | サポートしていません。 | 35.0 | 6.0 -webkit- | 15.0 -webkit- |
注：非標準の"フィルタ"プロパティをサポートするために、古いInternet Explorerブラウザ（8.0から4.0）が放棄されています。 IE8以前のブラウザでは、頻繁に使用する不透明度のプロパティを。
CSSの構文
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
ヒント：複数のフィルタを区切るには空白を使って下さい。
フィルター関数
注：フィルタは、典型的には、パーセンテージ（例えば75％）を使用し、もちろん、小数（0.75など）を表すために使用することができます。
| フィルタ | 説明 |
|---|---|
| なし | デフォルト値は、効果なし。 |
| ぼかし （PX） | 画像の設定にガウスぼかし。 値の標準的なガウス関数を設定するには、「半径」が貧弱である、または画面上のピクセルの数が一緒に溶融するので、値が大きいほど、よりぼやけました。 値が設定されていない場合、デフォルトは0です。このパラメータは、CSSの長さの値を設定することができますが、パーセント値を受け入れません。 |
| 輝度 （％） | 絵に線形乗算のアプリケーションが明るくまたは暗く見えるようにします。 値が0％である場合、画像は全て黒です。 値が100％、画像に変化はないです。 他の値は乗数効果を直線的に対応します。 100％以上の値は、画像がオリジナルより明るくなり、可能です。 値が設定されていない場合、デフォルト値は1です。 |
| コントラスト （％） | 画像のコントラストを調整します。 値が0％であり、画像が全て黒です。 値が100％、変更前の画像です。 値が低いコントラストを使用することを意味100％を超えることができます。 値が設定されていない場合、デフォルト値は1です。 |
| ドロップシャドウ（V H-影 -shadowぼかし拡散色） | 画像に影効果を設定します。 影は、特定の色が図のマスクオフセットバージョンを描くことができ、あいまいさがある可能性があり、下の画像に合成されます。 関数は（CSS3の背景に定義されている）<影>値が入力受け入れ、「インセット」のキーワードに加えて、許可されていません。 既存のボックスシャドウボックスshadowプロパティを持つ関数は非常によく似ています。それ以外は、フィルターを通して、パフォーマンスの向上のため、一部のブラウザでは、ハードウェアアクセラレーションを提供します。
|
| グレースケール （％） | 画像はグレースケールに変換します。 これは、変換比の値を定義します。 100％の値は、完全にグレースケール画像、変更前の画像の0％の値に変換されます。 0％と100％の間の値、乗数効果は線形です。 設定されていない場合、デフォルト値は0です。 |
| 色相回転 （度） | 画像色相回転への応用。 「アングル」カラーリング角画像は、設定値調整値です。 値は0deg、画像変化。 値が設定されていない場合、デフォルト値はは0deg。 別の周囲360degの同等の値を超えた最大値はありませんが。 |
| 反転 （％） | 入力画像を反転させます。 これは、変換比の値を定義します。 値の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を継承キーワードを |
より多くの例
コントラスト関数インスタンス
画像のコントラストを調整します。
-webkit-フィルタ：コントラスト（200％ ）; / *クロム、サファリ、オペラ* /
フィルタ：コントラスト（200％）。
}
»をお試しください
ドロップシャドウ関数の例
画像に影効果を設定します。
-webkit-フィルタ：ドロップシャドウ（ 8px 8px 10pxの赤）; / *クロム、サファリ、オペラ* /
フィルタ：ドロップシャドウ（8px 8px 10pxの赤）。
}
»をお試しください
グレースケール関数インスタンス
画像はグレースケールに変換します。
-webkit-フィルタ：グレースケール（50％ ）; / *クロム、サファリ、オペラ* /
フィルター：グレースケール（50％）。
}
»をお試しください
（）関数の例色相回転
画像への応用色相回転を：
-webkit-フィルタ：色相回転（ 90deg）; / *クロム、サファリ、オペラ* /
フィルター：色相回転（90deg） 。
}
»をお試しください
不透明度の関数インスタンス
画像の透明度の変換度
-webkit-フィルタ：不透明度（30％ ）; / *クロム、サファリ、オペラ* /
フィルター：不透明度（30％）。
}
»をお試しください
関数インスタンスを飽和
画像彩度を変換します：
-webkit-フィルタ：飽和（800パーセント ）; / *クロム、サファリ、オペラ* /
フィルター：（800％）、飽和;
}
»をお試しください
セピア関数インスタンス
セピアに画像を変換します。
-webkit-フィルタ：セピア（100％ ）; / *クロム、サファリ、オペラ* /
フィルター：セピア（100％）。
}
»をお試しください
合成関数
複数のフィルタの使用は、各フィルタは、スペースで区切られています。
注：順序は非常に重要である（例えば、完全なグレースケール画像を生成します）セピアを（使用する前に、グレースケール（）を使用）。
-webkit-フィルタ：コントラスト（200％ ）の明るさ（150％）; / *クロム、サファリ、オペラ* /
フィルタ：コントラスト（200％）の明るさ （150％）。
}
»をお試しください
すべてのフィルタの例
次の例では、すべてのフィルターを使用する方法を示します。
-webkit-フィルタ：ぼかし（4PX） 。
フィルター：ぼかし（4PX）。
}
.brightness {
-webkit-フィルタ：明るさ（0.30） ;
フィルター：明るさ（0.30）;
}
.contrast {
-webkit-フィルタ：コントラスト（180％ ）。
フィルタ：コントラスト（180％）。
}
.grayscale {
-webkitフィルター：グレースケール（100％ ）。
フィルター：グレースケール（100％）。
}
.huerotate {
-webkit-フィルタ：色相回転（原稿180°）。
フィルター：色相回転（原稿180°） 。
}
.invert {
-webkit-フィルタ：反転（100％ ）。
フィルター：反転（100％）。
}
.opacity {
-webkit-フィルタ：不透明度（50％ ）。
フィルター：不透明度（50％）。
}
.saturate {
-webkit-フィルタ：飽和（7） ;
フィルター：飽和（7）;
}
.sepia {
-webkit-フィルタ：セピア（100％ ）。
フィルター：セピア（100％）。
}
.shadow {
-webkit-フィルタ：ドロップシャドウ（ 8px 8px 10pxの緑色）。
フィルタ：ドロップシャドウ（8px 8px 10pxの緑色）。
}
»をお試しください
関連記事
HTML DOMリファレンス： スタイルは、フィルタ属性