例
黒と白の画像の色を変更する(100% grayscale) ：
// Standard syntax
document.getElementById("myImg").style.filter
= "grayscale(100%)";
// Code for Chrome, Safari and Opera
document.getElementById("myImg").style.WebkitFilter = "grayscale(100%)";
»それを自分で試してみてください 定義と使用法
フィルタ特性は、視覚効果追加(like blur and saturation)画像に。
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
Webkitのに続く数字は、接頭辞で働いていた最初のバージョンを指定します。
| プロパティ | |||||
|---|---|---|---|---|---|
| filter | 18.0のWebkit | 13.0 | 35.0 | 6.0のWebkit | 15.0のWebkit |
注意：クロム、SafariやOperaは代替、WebkitFilterプロパティをサポート。
構文
フィルタのプロパティを返します：
object .style.filterフィルタのプロパティを設定します。
object .style.filter="none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia()"
フィルタ関数
注意：パーセント値使用するフィルタ(ie 75%)また、小数として値を受け入れる(ie 0.75)
| フィルタ | 説明 |
|---|---|
| なし | 何の効果を指定しません |
| blur( px ) | 画像にぼかし効果を適用します。 より大きな値は、より多くのぼかしを作成します。 値が指定されていない場合は、0が使用されています。 |
| brightness( % ) | 画像の明るさを調整します。 0％は、画像が完全に黒になります。 100％は、 (1)デフォルトで、原画像を表します。 100％を超える値が明るく結果を提供します。 |
| contrast( % ) | 画像のコントラストを調整します。 0％は、画像が完全に黒になります。 100％は、 (1)デフォルトで、原画像を表します。 100％を超える値が少なくコントラストの結果を提供します。 |
| ドロップshadow( h-shadow v-shadow blur spread color ) | 画像にドロップシャドウ効果を適用します。 可能な値： H-影 -必須。 横シャドーのピクセル値を指定します。 負の値は、画像の左側に影を配置します。 V-影 -必須。 縦シャドーのピクセル値を指定します。 負の値は、画像の上に影を配置します。 ぼかし -オプション。 これは第3の値であり、ピクセル単位でなければなりません。 影にぼかし効果を追加します。 より大きな値は、より多くのぼかしを（影がどんどん軽くなる）が作成されます。 負の値は許可されていません。 値が指定されていない場合は、0（影のエッジがシャープである）が使用されます。 スプレッド -オプション。 これは、第4の値であり、ピクセル単位でなければなりません。 正の値は影を拡張し、より大きく成長するようになりますし、負の値は影が縮小するようになります。 指定しない場合、それは0になり(the shadow will be the same size as the element) 。 注意：クロム、Safariやオペラ、そしておそらく他のブラウザでは、この第四の長さをサポートしていません。 追加した場合、それは表示されません。 カラー：オプション。 影に色を追加します。 指定しない場合、色はブラウザに依存します(often black) 。 ヒント：このフィルタは、に似ているボックスシャドウプロパティ。 |
| grayscale( % ) | 画像はグレースケールに変換します。 0％ (0)デフォルトで、原画像を表します。 100％は、画像が完全に灰色になります(used for black and white images) 。 注意：負の値は許可されていません。 |
| hue- rotate( deg ) | 画像の色相の回転を適用します。 値は、画像サンプルが調整されるカラーサークルの周囲度の数を定義します。 0degはデフォルトであり、原画像を表します。 注意：最大値は360degです。 |
| invert( % ) | 画像内のサンプルを反転させます。 0％ (0)デフォルトで、原画像を表します。 100％は、画像が完全に反転するであろう。 注意：負の値は許可されていません。 |
| opacity( % ) | 画像の不透明度レベルを設定します。 不透明度レベルは、透明度レベルを、説明します。 0％は完全に透明です。 100％は、 (1)デフォルトで、原画像表す(no transparency) 。 注意：負の値は許可されていません。 ヒント：このフィルタは、に似て不透明プロパティ。 |
| saturate( % ) | 画像が飽和します。 0％ (0)画像が完全に不飽和になります。 100％は、デフォルトで、原画像を表します。 100％を超える値が過飽和結果を提供します。 注意：負の値は許可されていません。 |
| sepia( % ) | 画像はセピア色に変換します。 0％ (0)デフォルトで、原画像を表します。 100％は、イメージが完全にセピア色になります。 注意：負の値は許可されていません。 |
技術的な詳細
| CSSのバージョン | CSS3 |
|---|
関連ページ
CSSリファレンス： filter property
<スタイルオブジェクト