CSSのfilterプロパティで画像を暗くする方法

2024年11月20日

「CSSを使って、画像を暗くする方法はある？」

こんな疑問を持つ方に向けて、CSSを利用して画像を暗くする方法を解説します。

次のように、画像にCSSを適用するだけで簡単に画像を暗くすることができます。

この記事で解説する方法は、filterプロパティを利用した方法です。

`filter`プロパティを利用して画像を暗くする

filterプロパティを利用すれば、imgタグの画像と背景画像どちらでも簡単に暗くすることが可能です。

画像を暗くするのは、filterプロパティのbrightness()関数を使います。

次に画像を暗くするCSSの例を示します。

<img src="xxx.jpg">

img {
    filter: brightness(0.4);
}

これが記事の冒頭で示した、画像を暗くする方法になります。

背景画像を暗くするCSSの例を示します。

<div></div>

div {
    height: 934px;
    background-image: url(xxx.jpg);
    background-size: cover;
    filter: brightness(0.4);
}

これでimgタグで指定した画像と同じように背景画像を暗くすることが可能です。

以下がbrightness()関数の構文になります。

brightness(amount)

引数であるamountは、数値および%を指定できます。

値	完全に黒	効果なし
数値	0	1
パーセント	0%	100%

数値の場合は1以上、%の場合は100%以上の値を指定すると、画像を明るくすることも可能です。

brightness()関数の引数に2を指定すると、以下のようになります。