例
黒と白にすべての画像の色を変更します(100% gray) ：
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari,
Opera */
filter: grayscale(100%);
}
Original image
grayscale(100%)
ヒント：もっと"Try it Yourself"以下の例。
定義と使用法
フィルタ特性は、視覚効果を定義(like blur and saturation)要素に(often <img>)
| デフォルト値： | なし |
|---|---|
| 継承されました： | no |
| アニメーション： | yes. Read about animatable |
| バージョン： | CSS3 |
| JavaScriptシンタックス： | object .style.WebkitFilter="grayscale(100%)" Try it |
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
-webkit-に続く数字は接頭辞で働いていた最初のバージョンを指定します。
| プロパティ | |||||
|---|---|---|---|---|---|
| filter | 18.0 -webkit- | 13.0 | 35.0 | 9.1 6.0 -webkit- | 15.0 -webkit- |
注：Internet Explorerの古いバージョン(4.0 to 8.0)非標準サポートされている"filter"廃止されましたプロパティを。 これは主に使用された不透明度 IE8およびダウンからの支援を必要なときに。
CSSの構文
filter:
none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia() | url();ヒント：スペースで各フィルタを区切り、複数のフィルタを使用するには、 (See "More Examples" below) 。
フィルタ関数
注：パーセント値使用するフィルタ(ie 75%)また、小数として値を受け入れる(ie 0.75)
| フィルタ | 説明 | それを再生します |
|---|---|---|
| none | デフォルト値。 何の効果を指定します | それを再生します» |
| blur( px ) | 画像にぼかし効果を適用します。 値が大きいほど、より多くのぼかしが作成されます。 値が指定されていない場合は、0が使用されます。 | それを再生します» |
| brightness( % ) | 画像の明るさを調整します。 0％は、画像が真っ黒になります。 100％は、 (1)デフォルトで、元のイメージを表します。 100％を超える値が明るい結果を提供します。 | それを再生します» |
| contrast( % ) | 画像のコントラストを調整します。 0％は、画像が真っ黒になります。 100％は、 (1)デフォルトで、元のイメージを表します。 100％を超える値が少なくコントラストの結果を提供します。 | それを再生します» |
| drop-shadow( h-shadow v-shadow blur spread color ) | 画像にドロップシャドウ効果を適用します。 可能な値： H-影 -必須。 水平方向の影のピクセル値を指定します。 負の値は、画像の左に影を配置します。 V-影 -必須。 垂直方向の影のピクセル値を指定します。 負の値は、画像の上に影を配置します。 ぼかし -オプション。 これが第3の値で、ピクセル単位でなければなりません。 シャドウにぼかし効果を追加します。 値が大きいほど、より多くのぼやけを（影がどんどん軽くなる）が作成されます。 負の値は許可されません。 値が指定されていない場合は、0が（影のエッジがシャープである）が使用されます。 スプレッド -オプション。 これは、第4の値で、ピクセル単位でなければなりません。 正の値は影が拡大し、より大きく成長する原因となり、負の値は影が縮小する原因となります。 指定しない場合、それは0になります(the shadow will be the same size as the element) 。 注：クローム、サファリ、オペラ、そしておそらく他のブラウザでは、この第四の長さをサポートしていません。 追加された場合にはレンダリングされません。 色 -オプション。 影に色を追加します。 指定しない場合、色はブラウザに依存します(often black) 。 10pxののぼかし効果で、水平方向と垂直方向の両方8px大きい赤い影を、作成する例： フィルタ：ドロップシャドウ（8px 8px 10pxの赤）。 ヒント：このフィルタは、に似ているボックスシャドウプロパティ。 | それを再生します» |
| 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％は、画像が完全にセピア色になります。 注：負の値は許可されません。 | それを再生します» |
| url() | url()関数は、SVGフィルタを指定するXMLファイルの場所を取り、特定のフィルタ要素にアンカーを含んでいてもよいです。 例： フィルター： url(svg-url#element-id) | |
| initial | このプロパティがデフォルト値に設定します。 初期についての記事を読みます | |
| inherit | その親要素からこのプロパティを継承します。 継承についての記事を読みます |
その他の例
ブラー例
画像にぼかし効果を適用します。
img {
-webkit-filter: blur(5px); /* Chrome, Safari,
Opera */
filter: blur(5px);
}
Original image
blur(5px)
明るさの例
画像の明るさを調整します。
img {
-webkit-filter: brightness(200%); /* Chrome, Safari,
Opera */
filter: brightness(200%);
}
Original image
brightness(200%)
例コントラスト
画像のコントラストを調整します。
img {
-webkit-filter: contrast(200%); /* Chrome, Safari,
Opera */
filter: contrast(200%);
}
Original image
contrast(200%)
ドロップシャドウ例
画像にドロップシャドウ効果を適用します。
img {
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari,
Opera */
filter: drop-shadow(8px 8px 10px red);
}
Original image
drop-shadow(8px 8px 10px red)
グレースケールの例
画像はグレースケールに変換します。
img {
-webkit-filter: grayscale(50%); /* Chrome, Safari,
Opera */
filter: grayscale(50%);
}
Original image
grayscale(50%)
フエローテーション例
画像上の色相の回転を適用します。
img {
-webkit-filter: hue-rotate(90deg); /* Chrome, Safari,
Opera */
filter: hue-rotate(90deg);
}
Original image
hue-rotate(90deg)
反転例
画像内のサンプルを反転：
img {
-webkit-filter: invert(100%); /* Chrome, Safari,
Opera */
filter: invert(100%);
}
Original image
invert(100%)
不透明度の例
画像の不透明度レベルを設定します。
img {
-webkit-filter: opacity(30%); /* Chrome, Safari,
Opera */
filter: opacity(30%);
}
Original image
opacity(30%)
例を飽和
画像を飽和さ：
img {
-webkit-filter: saturate(800%); /* Chrome, Safari,
Opera */
filter: saturate(800%);
}
Original image
saturate(800%)
セピア例
画像をセピア色に変換します。
img {
-webkit-filter: sepia(100%); /* Chrome, Safari,
Opera */
filter: sepia(100%);
}
Original image
sepia(100%)
フィルタ/複数のフィルタを組み合わせます
複数のフィルタを使用するには、スペースで各フィルタを分けます。
注：オーダーが重要である(ie using grayscale()の後にsepia()完全にグレー画像になります）。
img {
-webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari,
Opera */
filter: contrast(200%) brightness(150%);
}
Original image
contrast(200%) brightness(150%)
すべての絞り込み
すべてのフィルタ機能のデモ：
.blur {
-webkit-filter: blur(4px);
filter: blur(4px);
}
.brightness {
-webkit-filter:
brightness(0.30);
filter: brightness(0.30);
}
.contrast {
-webkit-filter:
contrast(180%);
filter: contrast(180%);
}
.grayscale {
-webkit-filter:
grayscale(100%);
filter: grayscale(100%);
}
.huerotate {
-webkit-filter:
hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.invert {
-webkit-filter:
invert(100%);
filter: invert(100%);
}
.opacity {
-webkit-filter:
opacity(50%);
filter: opacity(50%);
}
.saturate {
-webkit-filter:
saturate(7);
filter: saturate(7);
}
.sepia {
-webkit-filter:
sepia(100%);
filter: sepia(100%);
}
.shadow {
-webkit-filter:
drop-shadow(8px 8px 10px green);
filter: drop-shadow(8px 8px 10px green);
} »それを自分で試してみてください 関連ページ
HTML DOMリファレンス： filter property