CSS | filterで画像を暗く表示する方法

2021-02-052023-06-07CSS 画像,CSS

CSSでfilterプロパティを利用して画像・写真を暗く加工した状態で表示する方法のサンプル集です。

「暗くする」という見出しですが、シンプルに暗転できるbrightness（明度）から、暗くするとは意味合いが少し違ってきますがgrayscale（グレースケール）、sepia（セピア調）、saturate（彩度）、contrast（コントラスト）なんかも紹介しています。

上記動作サンプルではマウスホバー時にフィルターがかかっていないデフォルトの状態を表示するようにしています。

brightness（明度）

一番、暗くするという表現に近いフィルター。

0～1までの値が指定可能で、0が一番暗く（黒）、1がフルターを通していないデフォルトの状態になります。

.brightness{
	filter: brightness(0.3);
}

grayscale（グレースケール）

HTML要素や画像・写真をグレースケール調にフィルターします。

0～1までの値が指定可能で、0がフルターを通していないデフォルトの状態で、1が最もグレースケールが掛かった状態になります。

.grayscale{
	filter: grayscale(0.9);
}

sepia（セピア調）

sepiaはHTML要素や写真をセピア調にフィルターします。

0～1までの値が指定可能で、0がフルターを通していないデフォルトの状態で、1が最もセピア調な状態になります。

.sepia{
	filter: sepia(1);
}

saturate（彩度）

saturateはHTML要素や写真の彩度を調節しフィルターします。

0～の値が指定可能で、0が最も彩度が低い状態で、1ががフルターを通していないデフォルトの状態、1以上の数値にて彩度を上げていく事が可能です。

.saturate{
	filter: saturate(0);
}

contrast（コントラスト）

contrastはHTML要素や写真のコントラストを調節しフィルターします。

0～の値が指定可能で、0がコントラストが最も低い灰色の状態、1ががフルターを通していない状態で、1以上の数値にてコントラスト値を上げていく事が可能です。

.contrast{
	filter: contrast(0.5);
}