スタイルフィルタ属性

定義と使用方法

フィルタ 属性が画像に視覚効果（例えばぼやけと鮮やかさ）を追加します。

参照してください：

CSSリファレンスマニュアル：フィルタ属性

例

画像の色を白黒（100%グレースケール）に変更します：

document.getElementById("myImg").style.filter = "grayscale(100%)";

自分で試してみてください

構文

フィルタ属性を返します：

object.style.filter

フィルタ属性を設定します：

object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"

フィルタ関数

注釈：百分率（例えば 75%）のフィルタも、十進数値（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-shadow - 必須。水平影のピクセル値を指定します。負の値は影を画像の左側に配置します。

v-shadow - 必須。垂直影のピクセル値を指定します。負の値は影を画像の上に配置します。

blur - オプション。第3の値はピクセル単位で指定します。影にぼかし効果を追加します。大きな値はより多くのぼかしを生み出し、影を大きくし明るくします。負の値は使用できません。指定しない場合、0（影のエッジは鋭利です）になります。

spread - オプション。第4の値はピクセル単位で指定します。正の値は影を拡大し、大きくする；負の値は影を縮小します。指定しない場合、0（影は要素の大きさと同じ）になります。

注釈：Chrome、Safari、Opera、および他のブラウザでは、第4の長さはサポートされていません；指定すると表示されません。

color：オプション。影に色を追加します。指定しない場合、色はブラウザによって決定されます（通常は黒です）。

ヒント：このフィルタは、box-shadow属性に似ています。
grayscale(%)

画像をグレースケールに変換します。

0% (0) はデフォルト値で、元の画像を示します。

100% は画像が完全にグレーになることを示します（モノクロ画像用）。

注釈：負の値は許可されていません。
hue-rotate(deg)

画像にトーンローテーションを適用します。この値は、画像のサンプルが色環のどの度に調整されるかを定義します。

0degはデフォルト値で、元の画像を示します。

注釈：最大値は360度です。
invert(%)

画像内のサンプルを反転します。

0% (0) はデフォルト値で、元の画像を示します。

100% は画像が完全に反転します。

注釈：負の値は許可されていません。
opacity(%)

画像の不透明度レベルを設定します。不透明度レベルは、以下のように透明度レベルを説明します：

0% は完全に透明です。

100% (1) はデフォルト値で、元の画像（透明度なし）を示します。

注釈：負の値は許可されていません。

ヒント：このフィルタは、opacity属性に似ています。
saturate(%)

画像の飽和度を調整します。

0% (0) は画像が完全不飽和になることを示します。

100% はデフォルト値で、元の画像を示します。

100% 以上の値は過剰に濃い結果を提供します。

注釈：負の値は許可されていません。
sepia(%)

画像を茶色に変えます。

0% (0) はデフォルト値で、元の画像を示します。

100% は画像が完全に茶色くなることを示します。

注釈：負の値は許可されていません。

技術的詳細

CSS バージョン： CSS3

ブラウザのサポート

このテーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
53.0 13.0 35.0 9.1 40.0