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

CSS,CSS 画像

css-filterで画像を暗く表示する

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

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

See the Pen CSS | Prevent the image from sticking out by yochans (@yochans) on CodePen.

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

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);
}

CSS,CSS 画像

Posted by Yousuke.U