CSS3 filter（フィルター）プロパティ
例
すべての画像の色を白黒（100%グレースケール）に変更します:
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
試してみる »
定義と使用
filter プロパティは、要素（通常は <img>）の視覚効果（例：ぼかしと彩度）を定義します。
| 初期値: | none |
|---|---|
| 継承: | no |
| アニメーション対応: | はい。詳細は参照してください。CSS アニメーション |
| バージョン: | CSS3 |
| JavaScript 構文: | object.style.WebkitFilter="grayscale(100%)" 試してみる » |
ブラウザサポート
表内の数字は、そのメソッドをサポートした最初のブラウザのバージョン番号を示します。
数字の直後の -webkit- は、指定されたブラウザのプレフィックスです。
| プロパティ | |||||
|---|---|---|---|---|---|
| filter | 18.0 -webkit- | 13.0 | 35.0 | 6.0 -webkit- | 15.0 -webkit- |
注意:旧版 Internet Explorer ブラウザ（4.0〜8.0）がサポートしていた非標準の "filter" プロパティは廃止されました。 IE8 以前のブラウザでは通常、opacityプロパティを使用します。
CSS 構文
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
ヒント:複数のフィルターは空白で区切ります。
Filter 関数
注意:フィルターは通常パーセント（例：75%）を使用しますが、小数（例：0.75）で表すこともできます。
| Filter | 説明 |
|---|---|
| none | 初期値。効果はありません。 |
| blur(px) | 画像にガウスぼかしを設定します。 "radius" の値は、ガウス関数の標準偏差、または画面上で何ピクセル分をぼかすかを設定します。値が大きいほどぼやけます。 値が設定されていない場合は、デフォルトは0です。このパラメータはCSSの長さの値を設定できますが、パーセント値は受け付けません。 |
| brightness(%) | 画像に線形乗算を適用し、明るくまたは暗く見せます。値が0%の場合、画像は完全に黒くなります。値が100%の場合、画像は変化しません。その他の値は線形乗数効果に対応します。100%を超える値も可能で、画像は元より明るくなります。値が設定されていない場合、デフォルトは1です。 |
| contrast(%) | 画像のコントラストを調整します。値が0%の場合、画像は完全に黒くなります。値が100%の場合、画像は変わりません。値は100%を超えることができ、より低いコントラストが適用されることを意味します。値が設定されていない場合、デフォルトは1です。 |
| drop-shadow(h-shadow v-shadow blur spread color) | 画像にドロップシャドウ効果を設定します。シャドウは画像の下に合成され、ぼかしを設定でき、特定の色で描画されたマスク画像のオフセットバージョンです。この関数は <shadow>（CSS3 背景で定義）タイプの値を受け入れますが、"inset" キーワードは許可されません。この関数は既存の box-shadow プロパティとよく似ています。違いは、フィルターを使用することで、一部のブラウザはパフォーマンス向上のためにハードウェアアクセラレーションを提供することです。 |
| grayscale(%) | 画像をグレースケール画像に変換します。値は変換の割合を定義します。値が100%の場合は完全にグレースケール画像になり、値が0%の場合は画像は変化しません。値が0%から100%の間の場合は、効果の線形乗数です。設定されていない場合、値はデフォルトで0です。 |
| hue-rotate(deg) | 画像に色相回転を適用します。 "angle" の値は、画像が調整される色相環の角度値を設定します。値が0degの場合は、画像は変化しません。値が設定されていない場合、デフォルトは0degです。この値に最大値はありませんが、360degを超える値はもう一周回転したことになります。 |
| invert(%) | 入力画像を反転します。値は変換の割合を定義します。100%の値は完全に反転します。値が0%の場合は画像は変化しません。値が0%と100%の間の場合は、効果の線形乗数です。値が設定されていない場合、デフォルトは0です。 |
| opacity(%) | 画像の透明度を変換します。値は変換の割合を定義します。値が0%の場合は完全に透明になり、値が100%の場合は画像は変化しません。値が0%と100%の間の場合は、効果の線形乗数であり、画像サンプルに量を掛けたものに相当します。値が設定されていない場合、デフォルトは1です。この関数は既存の opacity プロパティと非常に似ています。違いは、filter を使用することで、一部のブラウザはパフォーマンス向上のためにハードウェアアクセラレーションを提供することです。 |
| saturate(%) | 画像の彩度を変換します。値は変換の割合を定義します。値が0%の場合は完全に無彩度になり、値が100%の場合は画像は変化しません。その他の値は、効果の線形乗数です。100%を超える値は許可されており、より高い彩度になります。値が設定されていない場合、デフォルトは1です。 |
| sepia(%) | 画像をセピア色に変換します。値は変換の割合を定義します。値が100%の場合は完全にセピア色になり、値が0%の場合は画像は変化しません。値が0%から100%の間の場合は、効果の線形乗数です。設定されていない場合、値はデフォルトで0です。 |
| url() | URL 関数は、SVG フィルターを設定した XML ファイルを受け入れ、特定のフィルター要素を指定するためのアンカーを含めることができます。 例： filter: url(svg-url#element-id) |
| initial | プロパティをデフォルト値に設定するには、次を参照してください：CSS initial キーワード |
| inherit | 親要素からこのプロパティを継承するには、次を参照してください：CSS inherit キーワード |
その他の例
ぼかしの例
画像にガウスぼかし効果を使用：
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}
試してみる »
Brightness 関数の例
画像を明るくする:
-webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
filter: brightness(200%);
}
試してみる »
Contrast 関数の例
画像のコントラストを調整する:
-webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
filter: contrast(200%);
}
試してみる »
drop-shadow 関数の例
画像にドロップシャドウ効果を設定する:
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
filter: drop-shadow(8px 8px 10px red);
}
試してみる »
Grayscale 関数の例
画像をグレースケール画像に変換する:
-webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
filter: grayscale(50%);
}
試してみる »
hue-rotate() 関数の例
画像に色相回転を適用する:
-webkit-filter: hue-rotate(90deg); /* Chrome, Safari, Opera */
filter: hue-rotate(90deg);
}
試してみる »
Invert 関数の例
入力画像を反転する:
-webkit-filter: invert(100%); /* Chrome, Safari, Opera */
filter: invert(100%);
}
試してみる »
Opacity 関数の例
画像の透明度を変換する:
-webkit-filter: opacity(30%); /* Chrome, Safari, Opera */
filter: opacity(30%);
}
試してみる »
Saturate 関数の例
画像の彩度を変換する:
-webkit-filter: saturate(800%); /* Chrome, Safari, Opera */
filter: saturate(800%);
}
試してみる »
Sepia 関数の例
画像をセピア色に変換する:
-webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
filter: sepia(100%);
}
試してみる »
複合関数
複数のフィルターを使用する場合、各フィルターは空白で区切ります。
注意:順序は非常に重要です（例えば、grayscale() を使用した後に sepia() を使用すると、完全なグレースケール画像になります）。
-webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari, Opera */
filter: contrast(200%) brightness(150%);
}
試してみる »
すべてのフィルターの例
以下の例は、すべてのフィルターの使用方法を示しています:
-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 リファレンス:Style filter プロパティ
その他の拡張機能